javascript - jQuery:$(this).data('pinned')实际上做什么？

我有一些代码基本上是3个按钮和3个隐藏的轮播。当您将鼠标悬停在按钮上时，它会预览其轮播，而当您单击它时，它会显示该轮播。

要禁用悬停预览效果以免单击隐藏转盘，我使用了代码：$(this).data('pinned', !$(this).data('pinned'));，它可以工作，但是我不确定为什么。谁能解释为什么它继续显示轮播？

 $('#button01')
    .hover(function() {
        if (!($(this).data('pinned')) && !($(this).hasClass('disabled'))) {
            $('#carousel01').toggle('slide');
        }
    })

    .click ( function () {
        // cancel hover effect and pin carousel
        $(this).data('pinned', !$(this).data('pinned'));

        // disable other options
        if (!($(this).hasClass('disabled'))) {
            $(this).toggleClass('btn-primary');
            $('#button02').toggleClass('disabled');
            $('#button03').toggleClass('disabled');
    }
});

我希望.data('pinned')函数仅应用于按钮。它适用于整个可见页面吗？我试图查找它，但对于将.pin（）函数与“固定”一起使用一无所获。

我最初从这里得到了代码：Unpinning a div on document click

释放HTML：

    <div class="jumbotron">


        <div class="container">

                <div class="col-md-4">
                    <img src="" class="btn btn-default btn-lg displayed" id="button01" href="#" height="175" width="175">
                    <p class="centered"></p>
                </div>
                <div class="col-md-4">
                    <img src="" class="btn btn-default btn-lg displayed" id="button02" href="#" height="175" width="175">

                </div>
                <div class="col-md-4">
                    <img src="" class=" btn btn-default btn-lg displayed" id="button03" href="#" height="175" width="175">

                </div>
            </div>
        </div>

    </div>


<div class="container">
    <div id="carousel01" class="carousel slide wizard">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <h2>Slide 01<br />
                <small>subheading</small></h2>
                <p>Lorem ipsum </p>
                <a class="btn btn-primary" href="#carousel01" role="button" data-slide="next">Continue</a>
            </div>

            <div class="item">
                <h2>Slide 02<br />
                    <small>subheading</small></h2>
                <p>Lorem ipsum</p>
                <a class="btn btn-primary" href="#carousel01" role="button" data-slide="next">Next</a>
            </div>

         <div id="carousel02" class="carousel slide wizard">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <h2>Slide 01<br />
                <small>subheading</small></h2>
                <p>Lorem ipsum </p>
                <a class="btn btn-primary" href="#carousel02" role="button" data-slide="next">Continue</a>
            </div>

            <div class="item">
                <h2>Slide 02<br />
                    <small>subheading</small></h2>
                <p>Lorem ipsum</p>
                <a class="btn btn-primary" href="#carousel02" role="button" data-slide="next">Next</a>
            </div>

...

最佳答案

jQuery数据功能仅允许您存储与DOM（HTML）节点关联的任意数据。如果我们分解您拥有的代码，它看起来像这样：

 $('#button01') //Select the element with an ID of button01
    .hover(function() { //Whenever your cursor moves in or out of the node, run this function
        if (!($(this).data('pinned')) && !($(this).hasClass('disabled'))) { //If you haven't set it to be pinned
            $('#carousel01').toggle('slide'); //Show or hide the carousel
        }
    })

因此，每当您将光标移到按钮上或移开按钮时，它都会检查它是否已固定并显示它是否被隐藏，或者显示它时将其隐藏（这就是.toggle的作用）。

    .click ( function () { //Any time you click (or tap) the button
        // cancel hover effect and pin carousel
        $(this).data('pinned', !$(this).data('pinned'));

在jQuery事件（例如.click）内部时，$(this)指的是触发事件的元素，在这种情况下为按钮。就像代码在行尾一样，调用$(this).data('pinned')会返回与此ID为“固定”元素相关联的数据的当前值。 !将其取反，因此，如果为true，则为false；如果为false，则为true。然后，将从中获得的值设置为新的data属性，以便如果将其固定，则将其设置为不固定。

这是一种更详细的编写方式：

var currentPinnedStatus = $(this).data('pinned'); //Get the current pinned status
if (currentPinnedStatus == true) {
    var newPinnedStatus = false;
} else {
    var newPinnedStatus = true;
}
$(this).data('pinned', newPinnedStatus); //set the new pinned status

然后，当您从按钮上移出光标时，它将检查固定数据是否设置为false，并且仅在这种情况下隐藏轮播。当您将光标移回该按钮时，它将检查是否已将pinned再次设置为false，并且仅在设置为false时显示。

有关jQuery数据功能的更多信息，您可以看一下documentation