如何在多個html元素上重復相同的Javascript代碼

Question

注意：更改了代碼，使圖像和文本成為鏈接。

基本上，我有3張圖片，所有圖片均具有相同的類別，不同的ID。 我有一個javascript代碼，我想將其應用於所有三張圖片，除了該代碼根據圖片需要略有不同。 這是html：

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/actual.jpg"  id="first"></a>
<a href="images/watermark_pic1.jpg"><div id="firsttext" class="spanlink"><p>lots of text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/fake.jpg" id="second"></a>
<a href="images/watermark_pic1.jpg"><div id="moretext" class="spanlink"><p>more text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/real.jpg" id="eighth"></a>
<a href="images/watermark_pic1.jpg"><div id="evenmoretext" class="spanlink"><p>even more text</p></div></a>
</div>

這是id =“ firsttext”的Javascript：

$('#firstextt').hide();
$('#first, #firsttext').hover(function(){
 //in
  $('#firsttext').show();

},function(){
 //out
  $('#firsttext').hide();
});

因此，當用戶將鼠標懸停在#first上方時，將顯示#firsttext。 然后，我想要它，以便當用戶將鼠標懸停在#second上時，應顯示#moretext等。

我已經用Python完成了編程，創建了一個sudo代碼，基本上就是這個。

text = [#firsttext, #moretext, #evenmoretext]
picture = [#first, #second, #eighth] 

for number in range.len(text) //over here, basically find out how many elements are in text


$('text[number]').hide();
$('text[number], picture[number]').hover(function(){
 //in
  $('text[number]').show();

},function(){
 //out
  $('text[number]').hide();
});

語法可能還很遙遠，但這只是sudo代碼。 誰能幫我編寫實際的Javascript代碼？

Answer 1

嘗試這個

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink").show();
});

Answer 2

為什么不

$('.spanlink').hide();
$('.column1of4').hover(
  function() {
    // in
    $(this).children('.spanlink').show();    
  },
  function() {
    // out
    $(this).children('.spanlink').hide();
  }
);

它甚至不需要ID。

Answer 3

因此，鑒於您的html，您將執行以下操作：

$('.column1of4').on('mouseenter mouseleave', 'img, .spanlink', function(ev) {
    $(ev.delegateTarget).find('.spanlink').toggle(ev.type === 'mouseenter');
}).find('.spanlink').hide();

但是在您擁有的基礎上：

var text = ['#firsttext', '#moretext', '#evenmoretext'];
var picture = ['#first', '#second', '#third'];

這是使用閉包的傳統循環（最好在循環外部定義函數，但為此我將其保留在此處）：

// You could also do var length = text.length and replace the "3"
for ( var i = 0; i < 3; ++i ) {
    // create a closure so that i isn't incremented when the event happens.
    (function(i) {
        $(text[i]).hide();
        $([text[i], picture[i]].join(',')).hover(function() {
            $(text[i]).show();
        }, function() {
            $(text[i]).hide();
        });
    })(i);
}

下面是使用$.each遍歷該組。

$.each(text, function(i) {
    $(text[i]).hide();
    $([text[i], picture[i]].join(', ')).hover(function() {
        $(text[i]).show();
    }, function() {
        $(text[i]).hide();
    });
});

這是所有三個版本的小提琴 。 只需取消注釋您要測試的那個，然后試一試即可。

Answer 4

你能行的 ：

$('.column1of4').click(function(){

    $(this); // the current object
    $(this).children('img'); // img in the current object

});

或循環：

$('.column1of4').each(function(){
    ...
});

不要將ID用作多個事件的$（'＃id'），請使用.class或[attribute]執行此操作。

Answer 5

如果您使用的是jQuery，這很容易實現：

$('.column1of4 .spanlink').hide();
$('.column1of4 img').mouseenter(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').show();
});
$('.column1of4 img').mouseleave(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').hide();
});

Answer 6

根據您的標記結構，你可以使用DOM遍歷功能，如.filter() .find() .next()到你選擇的節點。

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink, img").show();
});

Answer 7

我將圖像移到div內，並使用此代碼（ 一個有效的示例） ：

$('.column1of4').each(function(){
    $('div', $(this)).each(function(){
        $(this).hover(
            function(){
                //in
                $('img', $(this)).show();
            },
            function(){
                //out
                $('img', $(this)).hide();
            });
    });
});

一般想法是1）使用不是ID的選擇器，這樣我就可以迭代幾個元素而不必擔心以后是否會添加將來的元素2）根據與$(this)位置定位div以隱藏/顯示（僅當您在標記中重復此結構時，此方法才有效）3）將圖像標簽移至div內（如果不這樣做，則懸停會有點混亂，因為在顯示圖像時會改變位置，因此影響是否光標是否在div內。

編輯

更新了小提琴以獲取其他要求 （請參閱評論）。