如何使用帶有（this）的代字符選擇器jquery

大家下午好，我試圖在div中選擇一個特定的兄弟。我試過使用了很多不同的建議，而且似乎無法使用任何工作。使用this，它看起來像我可能能夠使用這樣的事情：如何使用帶有（this）的代字符選擇器jquery

$("#prev ~ div").css("border", "3px groove blue");

不過，我想用（本）的選擇中，也許像這樣：

&(this " ~ p").show();

基本上，我只是想在某個事件被觸發時顯示一個段落兄弟。如果有人有更好的方法，我很樂意接受建議。我嘗試了其他方法，例如使用next（）和兄弟（「p」），但似乎無法使其工作。這裏是我現在有的HTML和jQuery的一部分。

<div class="col-sm-8 items"> 
    <div class="item"> 
     <h6>Dynamic Web Programming<h6> 
     <img src="DynamicWebProgramming.jpg"> 
     <p>This book is a great tool for learning to develop Dynamic Web Pages.</p> 
     // This is the paragraph that is hidden and I want to show on mouseover 
    </div> 
</div> 

$(document).ready(function() { 
    $(".item p").hide(); 

    $(".item h6").mouseover(function() { 
     $(this).addClass("mouseover"); 
     $(this).siblings().addClass("mouseover"); 
     $(this).siblings("p").show(); // This is where I want to call .show() for the 
             specific sibling 
    }) 

    $(".item p").click(function() { 
     $(this).removeClass("mouseover"); 
     $(this).siblings().removeClass("mouseover"); 
    }) 
})

如果任何人可以提供任何建議，那就太好了！謝謝，安迪

來源

2015-06-23 Andy Giebel

你在正確的軌道上，我會改變鼠標懸停盤旋：

$(".item h6").hover(function() { 
    $(this).toggleClass("mouseover"); 
    $(this).siblings().toggleClass("mouseover"); 
    $(this).siblings("p").show(); // This is where I want to call .show() for the specific sibling 
},function(){ 
    $(this).toggleClass("mouseover"); 
    $(this).siblings().toggleClass("mouseover"); 
    $(this).siblings("p").hide(); 
});

這裏fiddle

來源

2015-06-23 17:11:58 depperm

有趣，非常感謝！你介意我問爲什麼$（this）.siblings（「p」）。show（）不適用於mouseover？我問的原因是因爲我不希望段落在不再徘徊時再次隱藏。我可以通過從handlerOut函數中刪除.hide（）來實現這一點，但我不明白爲什麼它在mouseover中不起作用。再次感謝！ –

它似乎與我一起工作，我以爲你想切換它。這裏它正在處理你的代碼：http://jsfiddle.net/depperm/0qc1muw4/ – depperm

@AndyGiebel ** hover **使用** mouseenter **而不是** mouseover **。 http://api.jquery.com/mouseenter/ –

如何使用帶有（this）的代字符選擇器jquery

回答

相關問題