Question

我的网站上有多个按钮，其中包含一类详细信息。

我想要的只是定位单击该按钮来执行我的jquery fadeIn函数。当你单击详细信息按钮时，它的设置方式是jquery fadeIn函数应用于具有相同类的所有按钮。

我尝试使用$（this），但它仍然不起作用。

任何帮助将不胜感激，谢谢：）

    <script type="text/javascript">
    $(document).ready(function() {
    $(".details").click(function() {
        $(".popup", $(this)).fadeIn(2000);              
    });     
});  
</script>

很抱歉没有添加html。基本上会发生什么，当单击详细信息按钮时，将出现弹出框中的信息。

<h1>
    We look good together<span class="location">1223 w. street ave</span>
    <span class="details"><a href="#">Details</a></span>
</h1>

<div class="popup">
    <ul>
        <li>852</li><!--Square Foot goes here-->
        <li>2</li><!--Bedrooms goes here-->
        <li>1</li><!--Bathrooms goes here-->
        <li>$134,900</li><!--Price goes here-->                 
    </ul>               
</div>

Answer 1

假设这是一个重复的模式：

$(document).ready(function() {
    $(".details").click(function(e) {
        e.stopImmediatePropagation(); // remove if the anchor rel is actually meant to trigger
        thePopup = $(this).closest('h1').next('.popup'); // traverse to the proper popup
        thePopup.fadeIn(2000);              
    });     
});

如果它不是一个重复的模式，你可以通过绑定点击弹出一个相关弹出窗口的一个详细信息按钮，根据需要使用不同的类或ID来节省头痛。

Answer 2

您的.popup看起来与.details不在同一个父级？如果是这样，您需要使用.parents和.next在您的details元素后面找到弹出窗口：

$(".details").click(function() {
    $(this).parents('h1').next('.popup').fadeIn(2000);              
});

示例：http://jsfiddle.net/Z6CHX/

Answer 3

如果我的问题是正确的，这可能有所帮助，

<script type="text/javascript">
    $(document).ready(function() {
    $(".details").click(function() {
        $(this).fadeIn(2000);              
    });     
});  
</script>

Answer 4

你可以尝试：

$(".details").click(function(event) {
    $(".popup", $(this)).fadeIn(2000);
    event.stopPropagation()              
});

来自docs

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

然而，这不是一个理想的解决方案。最佳解决方案是在点击选择器上更具体。

使用jquery单击时，在特定按钮上执行功能

4 个答案: