Question

我必须用bootstrap重新编码一个网站。以前的站点版本有一个工作脚本，而在新版本上脚本不起作用。 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');

});

Answer 1

有许多事情没有正确地迁移到新版本。它的快速和短促是 您的新标记和CSS类与旧版本不匹配。

1）新版本中没有.appInfoText元素。虽然有一个DIV与.prodtext旧.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中，但这比我想要的更多。

Javascript无法在新的bootstrap站点上运行

1 个答案:

如何解决？