Question

我正在尝试仅在指定的div内运行一个函数，但是当前它在整个页面上执行。我的代码出了什么问题？

我想要实现的是，如果我点击任何按钮，只有我点击的按钮应该隐藏，只有一行“有些文字”应该出现。

Js：

jQuery(document).ready(function () {
    jQuery('.product-1').each(function () {
        hidePersonaliseButton();
    })

    jQuery('.product-2').each(function () {
        hidePersonaliseButton();
    })

    function hidePersonaliseButton() {
        jQuery('.btn-personalise').on('click', function () {
            jQuery('.btn-personalise').hide();
            jQuery('.show-me').fadeIn();
        });
    }
});

HTML：

<div class="product-1">
    <div class="personalise">
        <button type="button" title="button" class="btn-personalise">Button</button>
        <div class="show-me">
            <p class="personalisation">Some text 1</p>
        </div>
    </div>
</div>
<div class="product-2">
    <div class="personalise">
        <button type="button" title="button" class="btn-personalise">Button</button>
        <div class="show-me">
            <p class="personalisation">Some text 2</p>
        </div>
    </div>
</div>

的CSS：

.show-me {
    display:none;
}
.product-1 .show-me {
    background-color:yellow;
}
.product-2 .show-me {
    background-color:blue;
}

请在此处查看我的jsfiddle：http://jsfiddle.net/sfv3Le1w/1/

Answer 1

http://jsfiddle.net/sfv3Le1w/2/

jQuery(document).ready(function () {
    jQuery('.product-1').each(function () {
        hidePersonaliseButton();
    })

    function hidePersonaliseButton() {
        jQuery('.btn-personalise').on('click', function () {
            jQuery(this).hide(); // hide this element
            jQuery(this).siblings('.show-me').fadeIn(); // hide sibling .show me class
        });
    }
});

Answer 2

您不需要任何这些js代码，只需以下代码即可。

您的方法有误：

实际上你正在做的是将hide功能附加到每个目标部分，但是可以通过将click处理程序直接附加到按钮类btn-personalise来完成相同的操作。

JS代码：

jQuery('.btn-personalise').on('click', function () {
        jQuery(this).hide();
        jQuery(this).siblings('.show-me').fadeIn();
 });

Here is the corrected JSFiddle

Answer 3

工作小提琴：http://jsfiddle.net/caLnej9w/1/

试试这个解决方案：

$(document).ready(function () {
    $('.btn-personalise').on('click', function () {
        $(this).next().fadeIn();
        $(this).hide();        
    });
});

仅在指定的div类中运行函数

3 个答案: