Javascript不工作在新的引导网站
Javascript not working on new bootstrap site
我必须重新编码一个网站与引导。以前的网站版本有一个工作脚本,而在新版本的脚本不工作。http://sacim-design.esy.es/新网站
http://test.denkmann.ro旧版本与工作脚本。
这是javascript的一部分。Jsfiddle
$(document).ready(function(){
var studii='Solutii standard sau dezvoltate in stansa colaborare cu clientul , in functie de specificul fiecarui caz. Transportul mostrelor de tesut, analizelor de sange sau componentelor sensibile ale aparaturii medicale reprezinta o provocare la care raspundem cu solutii fiabile si de incredere pentru clienti din diferite sectoare de activitate: laboratoare medicale, lanturi de farmacii, producatori de medicamente, banci de celule si de sange.';
var standard='<div class="appButtonSelected">VEZI PRODUSELE</div>';
var vet='Problemele trasportului la temperatura controlata din domeniul veterinar sunt comune pana la un anumit punct cu cele din medicina umana. Insa uneori este nevoie de solutii special dezvoltate pentru activitati specifice domeniului veterinar, cum ar fi transportul animalelor cu sange rece-reptile si amfibieni sau activitati adiacente: incubarea/inmultirea serpilor, soparlelor, testoaselor pentru practica veterinara. '
var alimentar='Cunoastem foarte bine probemele cu care se confunta companiile din domeniul transportului alimentar. Experienta noastra si posibilitatea de a efectua teste in propriul laborator de incercari ne recomanda ca un partener de incredere pentru producatorii si transportatorii de alimente speciale, perisabile sau inghetate. Avand in vedere variabilele multiple din acest sector, am dezvoltat de-a lungul timpului solutii ingenioase de design si functionalitate.'
var logistic='De la mic la mare, in logistica fiabilitatea si exigenta germane fac diferenta.La orice intrebare oferim cel mai bun raspuns, fie ca este vorba de transporturi voluminoase pentru perioade mai indelungate de timp sau de perioade de transit mai reduse. De asemenea, prin parteneriatul cu LogTag® putem pune la dispozitie recordere de transport, care reflecta indicatorii de temperatura pe toate durata expeditiei produselor. '
var farma='Produsele termo-sensibile din industriile farmaceutica si biotehnologie trebuie sa fie de obicei transportate si depozitate in medii cu o temperatura cuprinsa intre 2-8 °C controlata, ferite de fluctuatii termice si radiatia solara. Pe durata transportului si stocarii medicamentelor alimentelor si altor produse termo-sensibile, cutiile izolatoare din EPS asigura o protectie excelenta fata de caldura si umeazeala.'
$(".appButton").click(function(){
$(".appButtonSelected").attr('class','appButton');
$(this).addClass('appButtonSelected');
if($(this).attr('id')==='studii')
{
$(".appInfoText").css('display','none');
$(".appInfotext").html(studii);
$(".appInfotext").append(standard);
$("#faramcist").attr('src','public/images/background_'+$(this).attr('id')+'.png')
$(".appInfoText").fadeIn(2000);
}
if($(this).attr('id')==='alimentar')
{$(".appInfoText").css('display','none');
$(".appInfotext").html(alimentar);
$(".appInfotext").append(standard);
$("#faramcist").attr('src','public/images/background_'+$(this).attr('id')+'.png')
$(".appInfoText").fadeIn(2000);
}
if($(this).attr('id')==='farma')
{$(".appInfoText").css('display','none');
$(".appInfotext").html(farma);
$(".appInfotext").append(standard);
$("#faramcist").attr('src','public/images/background_'+$(this).attr('id')+'.png')
$(".appInfoText").fadeIn(2000);
}
if($(this).attr('id')==='vet')
{$(".appInfoText").css('display','none');
$(".appInfotext").html(vet);
$(".appInfotext").append(standard);
$("#faramcist").attr('src','public/images/background_'+$(this).attr('id')+'.png')
$(".appInfoText").fadeIn(2000);
}
if($(this).attr('id')==='logistic')
{$(".appInfoText").css('display','none');
$(".appInfotext").html(logistic);
$(".appInfotext").append(standard);
$("#faramcist").attr('src','public/images/background_'+$(this).attr('id')+'.png')
$(".appInfoText").fadeIn(2000);
console.log($("#faramcist"));
}
});
$("#studii").trigger('click');
});
有许多东西没有正确迁移到新版本。简单来说,你的新标记和CSS类不能与旧的匹配。
1)
新版本没有.appInfoText
元素。尽管.prodtext
有一个DIV原来的.appInfoText
DIV在那里。脚本,如果它识别元素属性(参见#2),将没有任何地方放置文本,因为.appInfoText
不存在。
2) 旧版本有:
<div class="appButton" id="[some id]">
<span>[text here]</span>
</div`>
,新版本有:
<div class="appButton">
<p style="text-align: center;" id="[some id]">[text here]</p>
</div>
注意,脚本使用的id
已经移动到不同的元素,破坏了脚本的文本交换(以及#1)。
显示单个if
语句的脚本的简化版本:
$( ".appButton" ).click( function() {
if ( $( this ).attr( 'id' ) === 'studii' ) {
$( ".appInfoText" ).css( 'display', 'none' );
$( ".appInfotext" ).html( studii );
$( ".appInfotext" ).append( standard );
$( "#faramcist" ).attr( 'src', 'public/images/background_' + $( this ).attr( 'id' ) + '.png' );
$( ".appInfoText" ).fadeIn( 2000 );
}
}
$( this )
表示被点击的元素具有.appButton
类。脚本检查.appButton
元素和ID是否等于studii,它没有,因为ID现在在另一个元素上,即子元素<p>
。
如何修复?
简单的回答:确保您的标记是相同的,并且在正确的元素上有id和类,即如上所述的相关部分。我看不出ID需要在<p>
上的原因。
仍然很简单,一点工作答案:修复脚本
将.appInfoText
改为.prodtext
。而不是$( this ).attr( 'id' )
,它看DIV与。appButton
,让它看<p>
与你需要检查的ID, $( this ).children( 'p' ).attr( 'id' )
。
这可能不是需要调整的每一件事,但会让你有很长的路要走,并指出正确的方向,如何调试你所看到的问题。
顺便说一句,如果你要调整脚本,我想提出一些建议。
1)缓存对元素的引用,这样您就不必每次需要访问它们时都查询它们。而不是:
if ( $( this ).attr( 'id' ) === 'studii' ) {}
if ( $( this ).attr( 'id' ) === 'alimentar' ) {}
if ( $( this ).attr( 'id' ) === 'farma' ) {}
:
var $this = $( this );
var $id = $this.attr( 'id' );
$this.addClass( 'appButtonSelected' );
if ( $id === 'studii' ) {}
if ( $id === 'alimentar' ) {}
if ( $id === 'farma' ) {}
2) jQuery允许你链接方法调用。而不是:
$( ".appInfoText ").css( 'display', 'none' );
$( ".appInfoText ").html( studii );
$( ".appInfoText ").append( standard );
:
$( '.appInfoText' ).css( 'display', 'none' ).html( studii ).append( standard );
如果你不插入任何标记,我会使用text()
方法而不是html()
。
我不确定我会像脚本那样在JS中存储内容字符串,但这比我想要的要多。
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 代理一个网站能够在iframe中进行所见即所得编辑-它是如何工作的
- 使用HTML和任何服务器端语言(PHP,.net,ruby)制作的网站是否可以在每个具有浏览器的设备上工作
- Toggle已停止在我的网站上工作
- 谷歌脚本-从网站论坛解析HTML-并将数据写入工作表
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- JavaScript网站与工作实例
- 如何在node.js的帮助下使用网站在localhost上工作
- 如何使Asp.net网站同时在IE 11(非可比模式)和IE 8中工作
- 缓存以使我的网站离线是't工作
- jsFiddle工作,网站JS不工作
- 代码在 jsfiddle 中工作,但在我的网站上不起作用
- 我的jQuery在JSFiddle中工作,但不能在我的网站上工作!我做错了什么
- CSS 在基于 URL 上工作,但不在网站的其他页面中使用.代码点火器
- JavaScript不能在一个网站上工作,但在另一个网站上很好
- 如何让Jsfiddles在网站上工作
- 如何让旋转木马为drupal网站工作
- 带宽检查与视频网站(工作在手机和平板电脑)
- 如何DownForEveryoneOrJustMe.com和其他类似的网站工作与跨域脚本限制
- 网站工作,但不是在iphone上.XMLHttpRequest()错误