Javascript不工作在新的引导网站

Javascript not working on new bootstrap site

本文关键字:网站 工作 Javascript      更新时间:2023-09-26

我必须重新编码一个网站与引导。以前的网站版本有一个工作脚本,而在新版本的脚本不工作。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中存储内容字符串,但这比我想要的要多。