jquery - 为什么这个 jQuery 代码没有按预期运行？

Question

为什么这个查询不能正常工作？data-target 属性是否无法识别另一个元素？

JS

$('button').click(function(){
    // uses the button's "data-target" attribute to identify another element to toggle
    target = $('#' + $(this).data('target'));

    // toggles the visibility of the target
    if (target.is(':visible')) {
        target.slideUp();
    } else {
        target.slideDown();
    }

    // says goodbye if it was hidden 
    if (target.is(':hidden')){
        alert('goodbye, cruel world!');
    }
});

Answer 1

她的例子是 jsfiddle，http://jsfiddle.net/ravikumaranantha/sDvph/1/

代码没有问题，可能是标记有问题，下面的标记可以正常工作。

<button data-target="toggleTarget">test button</button>
<div id="toggleTarget">
    <p>this is the target</p>
    <p>this is the target</p>
    <p>this is the target</p>
    <p>this is the target</p>
    <p>this is the target</p>
    <p>this is the target</p>
</div>

Answer 2

基本上，当目标被隐藏时，你的消息不起作用。

这里发生的是您检查元素是否可见。但是，您使用 .slideUp() 隐藏元素。动画未完成时，该元素不会被视为隐藏。您检查它是否在动画触发后立即可见（这并不意味着动画已经完成）。
您要做的是在隐藏动画完成后显示消息（您不需要检查它是否可见，因为它总是在该动画之后隐藏）

if (target.is(':visible')) 
{
    target.slideUp('slow', function()
                   {
                       alert('goodbye, cruel world!');
                   });

} 
else 
{
    target.slideDown();
}

jsFiddle

Answer 3

数据属性并不总是给我我想要的结果，这可能是问题所在。您可以检查该值是否正确：

console.log( $(this).data('target') );// check it's value

这肯定有效：

target = $('#'+ $(this).attr('data-target') );
console.log( target.length +' items found'); // log how many items found (should be 1)

这不是您尝试使用另一个对象的值的事实，字符串是字符串，无论它来自何处（变量，属性，属性值等）