如何推廣在jQuery中的點擊功能

我有13張小圖片和13張大圖片，如果有任何小圖片被點擊，它會顯示相關的大圖片，我只是想知道是否有可能推廣點擊功能，所以我沒有重複貴婦人碼13倍，由於如何推廣在jQuery中的點擊功能

<div id="press_images"> 

       <img id="s1" class="small" src="images/press/small/1.png" /> 
       <img id="s2" class="small" src="images/press/small/2.png" /> 
       <img id="s3" class="small" src="images/press/small/3.png" /> 
       <img id="s4" class="small" src="images/press/small/4.png" /> 

       ..... 
       <img id="s13" class="small" src="images/press/small/13.png" /> 
</div> 

<div class="big">  
       <a id="close">X</a> 
       <img id="b1" src="images/press/big/1.jpg" /> 
       ...... 
       <img id="b13" src="images/press/big/13.jpg" /> 
</div> 


$("#s1").click(function(){ 

    $('#b1').show(); 
    $('.big').show(300); 
     return false; 
    });

，所以我在想，如果我可以改變$（「＃S1」）。點擊（函數（），所以我不要重複13次。

感謝

來源

2009-12-07 amir

爲什麼沒有人閱讀此頁：http://docs.jquery.com /選擇器 – nickf 2009-12-07 11:21:02

@nickf事件附件放在一邊，OP的問題是針對編寫一個回調來處理所有圖像的點擊。 – 2009-12-07 11:24:23

下面應該工作：

$(".small").click(function(){ 
     var id_img=$(this).attr('id').replace('s',''); 
     $('.big img').hide(); 
     $('#b'+id_img).show(); 
     $('.big').show(300); 
     return false; 
});

來源

2009-12-07 11:19:37

試試這個

// For all <img>'s with class `small` 
$("img.small").click(function() { 
    // Get the index from the small image's ID 
    var index = this.id.substr(1); 
    // Hide all other big images 
    $(".big img").hide() 
    // Show the related big images 
    $('#b' + index).show(); 
    // Show the big image container 
    $('.big').show(300); 

    return false; 
});

來源

2009-12-07 11:17:57

在每個圖像中放置一個類。例如：

<img id="s1" class="small clickable-image" src="images/press/small/1.png" />

然後：

$(".clickable-image").click(function(){ 

    $('#b1').show(); 
    $('.big').show(300); 
    return false; 
});

編輯：那當然，你必須改變行$（ '＃B1'）顯示（）;但是，很簡單，您只需獲取元素ID並構建較大圖像的ID即可。就像賈斯汀約翰遜在他的回答中所做的一樣。

來源

2009-12-07 11:19:19 Drevak

在這種情況下，b1會每次顯示爲一個大圖像。 – 2009-12-07 11:25:20

這並沒有概括回調 – 2009-12-07 11:25:43

是的，我只是複製代碼。沒有看到它。他只需要做你的回答。 – Drevak 2009-12-07 11:33:53

<div id="press_images"> 

       <img id="small1" class="small small-img" src="images/press/small/1.png" /> 
       <img id="small2" class="small small-img" src="images/press/small/2.png" /> 
       <img id="small3" class="small small-img" src="images/press/small/3.png" /> 
       <img id="small4" class="small small-img" src="images/press/small/4.png" /> 

       ..... 
       <img id="small13" class="small small-img" src="images/press/small/13.png" /> 
</div> 

<div class="big">  
       <a id="close">X</a> 
       <img id="big1" class="big-img" src="images/press/big/1.jpg" /> 
       ...... 
       <img id="big13" class="big-img" src="images/press/big/13.jpg" /> 
</div> 


$(".small-img").click(function(e){ 

    var imgBig = String($(this).attr("id")).replace("small", "big"); 

    e.stopPropagation(); 
    $(".big-img").hide(); 
    $("#" + imgBig).show(); 
    $(".big").show(300); 

});

來源

2009-12-07 11:23:34

新類和顯式字符串轉換不是必需的。但是請好好調用'$（「。big-img」）。hide（）;' – 2009-12-07 11:27:18

這就是我想要做的：

<div id="press_images"> 
     <img id="s1" rel="b1" class="small" src="images/press/small/1.png" /> 
     <img id="s2" rel="b2" class="small" src="images/press/small/2.png" /> 
</div> 

<div class="big">  
     <a id="close">X</a> 
     <img id="b1" class="big" src="images/press/big/1.jpg" /> 
     <img id="b2" class="big" src="images/press/big/2.jpg" /> 
</div> 


$(".small").click(function(){ 
    $(".big img").hide(); 
    $("#"+ $(this).attr("rel")).show(); 
}

請注意，我用「rel」的元素聯繫起來。我認爲它比假設b1與s1有關更清潔。我喜歡CoC，但我不確定在那種情況下，它會是最好的主意。

來源

2009-12-07 11:34:17 marcgg

你不再顯示圖像。但是rel也是一個很好的方法。 – 2009-12-07 11:48:35

我想我修好了（看編輯） – marcgg 2009-12-07 11:49:21

你忘了$（'。big'）。show（300）;但沒有什麼大不了的，關鍵在這裏。 – 2009-12-07 11:51:38

最靈活的選擇是使用index和eq，擺脫所有明確的HTML輔助，如ID或相對

$('#press_images img').click(function() { 
    var n = $('#press_images img').index(this); 
    $(".big img").hide().eq(n).show() 
});

來源

2009-12-07 11:44:18 user187291

如何推廣在jQuery中的點擊功能

回答

相關問題