Question

我整天都在和我的代码争吵，没有运气解决问题。

我的网站有一系列用作导航的图片：

    <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中的图像：“thumb”仍然正常，“if”语句仍然有效。

根据我帖子中的顶部代码框对所有图像进行标记和格式化，我无法弄清楚为什么只有“thumbset”中的图像才能决定停止工作。我对Javascript非常非常环保，所以非常感谢任何帮助！

更新：这是我更新的代码。现在更干净但功能根本不起作用。我想问题可能是“image”变量的变量设置？

    $(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;


      });
  });

Answer 1

使用

$(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();
    //...

如果＆amp;你的代码减少了66％

Javascript - 替换div中的内容，单击处理程序的问题

1 个答案: