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

她的例子是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)

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

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

3 个答案: