如何使用jQuery選擇工作

我有一個HTML的結構是這樣的： -如何使用jQuery選擇工作

<article id="a_post" class="a_post"> 
<div id="thumbnail"> 
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/> 
</div> 
<div id="instant_video" class="instant_video"> 
<span class="close"></span> 
    // Some content here 
</div> 
</article>  
<article id="a_post" class="a_post"> 
<div id="thumbnail"> 
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/> 
</div> 
<div id="instant_video" class="instant_video"> 
<span class="close"></span> 
    // Some content here 
</div> 
</article>

在上面的HTML，<div id="instant_video" class="instant_video"> <span class="close"></span> // Some content here </div>有display:none;一個css。我想要做的就是當有人點擊<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>我想滑下div的id爲instant_video，其顯示在css中設置爲none。

然後，當有人點擊關閉類的跨度時，它會再次淡出該特定的div。

但我遇到了jQuery選擇器的嚴重問題，因爲我真的是業餘愛好者。

我正在使用的代碼在所有隱藏的div中滑動，其id爲instant_video，這就是問題持續存在的地方。

我想要做的只是向下滑動文章標籤中包含我點擊的圖像的div。

我目前使用的代碼如下： -

jQuery(document).ready(function() { 
    jQuery('img#shine').click(function() { 
     jQuery('.instant_video').slideDown('fast') 
    }); 
}); 
jQuery(document).ready(function() { 
    jQuery('.close').click(function() { 
     jQuery('.instant_video').fadeOut('slow') 
    }); 
});

來源

2012-08-28 Akash Kumar

首先使用'$'代替'jQuery' - 只需更短一點，然後使用'$（document）.ready（function（）...'每頁只有一次 –

我的建議：不要使用相同的名稱對於一個班級和身份證號碼，永遠不要給同一個ID超過1個元素 –

試試這個：

jQuery(document).ready(function($) { 
    $('.a_post img').click(function() { 
     $(this).closest('.a_post').find('.instant_video').slideDown('fast') 
    }); 

    $('.close').click(function() { 
     $(this).closest('.instant_video').fadeOut('slow') 
    }); 
});

沒有必要有$(document).ready兩次

也id標籤必須是唯一的

，因爲你有很多instant_video你應該使用closest來獲取相關的img你點擊

來源

2012-08-28 10:01:21 mgraph

你的解釋很好，你今天教給我一些新東西。 –

-1

ID必須是唯一的頁面，你是一流的，即通過ID選擇

jQuery('.instant_video')

選擇像這

jQuery('#instant_video')

來源

2012-08-28 10:00:52 lukenz

你是對的，但你剛剛回答了問題的標題，而不是問題本身 –

的一個

首先，任何給定的id都不允許有多個元素。 id屬性在文檔中必須是唯一的。

的解決問題的方法就是給你img元素class屬性而不是id，然後使用jQuery的遍歷方法（closest andfind在這種情況下），以獲得相關的元素。

因此，假設您img元素具有類shine，你可以這樣做：

$(document).ready(function() { 
    $('img.shine').click(function() { 
     $(this).closest('article').find('.instant_video').slideDown('fast'); 
    }); 
    $('span.close').click(function() { 
     $(this).closest('.instant_video').fadeOut('slow'); 
    }); 
});

來源

2012-08-28 10:01:53 lonesomeday

請記住，ID都是唯一的。一個頁面上不能有兩個具有相同ID的元素！

然而，嘗試這樣的事情：指定一個類的IMG #shine而不是ID：

<img class="shine" src="wp-content/themes/dabanggknight/images/play.png"/>

然後使用此代碼：

jQuery(function(){ 
    jQuery('img.shine').on('click', function(){ 
     jQuery(this).closest('.a_post').find('.instant_video').slideDown('fast'); 
    }); 

    jQuery('.close').on('click', function(){ 
     jQuery(this).closest('.a_post').find('.instant_video').fadeOut('slow'); 
    }); 
});

（或者更短，嘗試這:) :)

$(function(){ 
    $('img.shine').on('click', function(){ 
     $(this).closest('.a_post').find('.instant_video').slideDown('fast'); 
    }); 

    $('.close').on('click', function(){ 
     $(this).closest('.a_post').find('.instant_video').fadeOut('slow'); 
    }); 
});

來源

2012-08-28 10:05:33 Alex

Tr有點像;

$('#shine').click(function() { 
    $(this).closest('.a_post').find('.instant_video').slideDown('fast'); 
}); 
$('.close').click(function() { 
    $(this).closest('.instant_video').fadeOut('slow'); 
});

Here是一個工作現場演示。

來源

2012-08-28 10:08:02

如何使用jQuery選擇工作

回答

相關問題