0

我整天都在与我的代码争论，但没有解决问题。

我的网站有一系列图像作为导航：

    <div id="thumbs">
    <a href="#" rel="images/edwards1.jpg" class="image"><img src="images/edwardsthumb1.jpg" class="thumb" border="0"/></a>
    <a href="#" rel="images/sample1.jpg" class="image"><img src="images/sample1thumb.jpg" class="thumb" border="0"/></a>
    </div>

单击这些时，会将内容添加到空白 div：

<div id="image">  <!-- main image container -->
</div>

<div id="gallerytext"> <!-- text box -->    
</div>

<div id="thumbset"> <!-- series of sub images/navigation -->
</div>

使用这个 javascript：

        $(function() {
        var text = $('#gallerytext1').html();  <!-- blank divs are filled with content on page load -->
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


  <!-- click handler -->

  $(".image").click(function() {    <!-- image variable is set when an image with class "image" is clicked -->
        var image = $(this).attr("rel"); <!-- each image has appropriate rel attribute to fill variable -->

    if (image == 'images/edwards1.jpg'){   <!-- different text and gallery loaded on click of specific image -->
        var text = $('#gallerytext1').html();
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);
        $('#thumbset').hide();
        $('#thumbset').fadeIn('slow');
    }

    if (image == 'images/sample1.jpg'){     <!-- different text and sub-gallery loaded on click of specific image -->
        var text = $('#gallerytext2').html();
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset2').html();
        $('#thumbset').html(thumbset);
        $('#thumbset').hide();
        $('#thumbset').fadeIn('slow');
    }

    $('#image').hide();                 <!--  main image changed -->
    $('#image').fadeIn('slow');
    $('#image').html('<img src="' + image + '"/>');
    return false;

      });
      });

它在初始加载后工作正常，但是如果触发“if”语句之一并更改内容，则 div“thumbset”中具有 .image 类的图像现在不可点击，并且主图像不再更改。主导航 div 中的图像：“thumbs”仍然可以正常工作，“if”语句仍然有效。

所有图像都根据我帖子中的顶部代码框进行标记和格式化，我无法弄清楚为什么只有“thumbset”中的图像决定停止工作。我对 Javascript 非常熟悉，因此将不胜感激任何帮助！

更新：这是我更新的代码。现在清洁多了，但该功能根本不起作用。我在想问题可能出在“图像”变量的变量设置上？

    $(document).ready(function() {
    var $doc = $(document.body);


        var text = $('#gallerytext1').html();  //blank divs are filled with content on page load 
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


    //click handler
       $doc.on("click",".image",function(){

        var image=$(this).attr("rel"); 
        var imid=$(this).attr("data");
        var text=$('#gallerytext'+imid).html();
        var thumbset=('#thumbset'+imid).html();

        $('#debug').html(imid);

        $('#gallerytext').fadeIn('slow');
        $('#gallerytext').html(text);
        $('#thumbset').fadeIn('slow');
        $('#thumbset').html(thumbset);
        $('#image').hide();                 
        $('#image').fadeIn('slow');
        $('#image').html('<img src="' + image + '"/>');
        return false;


      });
  });
4

1 回答 1

0

采用

$(document).ready(function() {
var $doc = $(document.body);
$doc.on("click",".image", function() {//...

然后绑定 $doc 中的所有事件（如果选择器不同，则链接它们

$doc.on(event,selector,function).on(ev,sel,fn)...

或者如果同一选择器上有多个事件

$doc.on({
        ev : function(e) {},
        ev2 : function(e) {}
        //... 
        },selector).on()...

要在 javascript 使用中注释掉，它会在同一行注释后面的内容

//

而不是<!--哪个更意味着注释掉html

您的意大利面条代码就像许多重复的指令，

取出if中的常用指令

定义一个模式以避免使用 if(stg=='sthg')

例如你可以做

     <a ... data-idtoload="*id*">...

然后

    var imid=$(this).data("idtoload");
    var text = $('#gallerytext'+imid).html();  
    $('#gallerytext').html(text);
    var thumbset = $('#thumbset'+imid).html();
    //...

如果你的代码被削减了 66%，那就没有了

于 2013-01-31T08:07:22.597 回答