-3

为什么这个查询不能正常工作?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!');
    }
});
4

3 回答 3

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>
于 2013-10-22T07:47:04.370 回答
1

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

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

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

} 
else 
{
    target.slideDown();
}

jsFiddle

于 2013-10-22T07:53:36.360 回答
-1

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

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)

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

于 2013-10-22T07:44:55.547 回答