Javascript JQuery:this.data（'；pinted'；）实际上做什么？

我有一些代码，基本上是3个按钮和3个隐藏的旋转木马。当您将鼠标悬停在某个按钮上时，它将预览该按钮的旋转木马，当您单击该按钮时，它将显示旋转木马

要禁用悬停预览效果，使其在单击时隐藏旋转木马，我使用了以下代码：

$（this.data（'pinted'），！$（this.data（'pinted'）），它可以工作，但我不知道为什么。有人能解释为什么它一直显示旋转木马吗

 $('#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（'pinted'）
函数只应用于按钮。它是否适用于整个可见页面？我试图查找它，但我看不到与.data（）函数一起使用“pinted”的任何内容

我最初是从这里得到代码的：

相关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>   

...



幻灯片01

副标题
同侧眼睑

幻灯片02

副标题
同侧眼睑

幻灯片01

副标题
同侧眼睑

幻灯片02

副标题
同侧眼睑

...
让我们分析以下代码：

$('#button01')                                        // The button's jQuery Object.
  .click ( function () {                              // Click event handler binding.
    $(this).data('pinned', !$(this).data('pinned'));  // this refers to the <input />
  });

这将变成
false
。它只是用于类型转换。这在JavaScript和其他编程语言中很常见，您可以说这是将任何类型的变量转换为
布尔值的快捷方式

所以，当你有类似字符串的东西时：

var a = "true";  // string: true
b = !a;          // bool: false;
c = !!true;      // bool: true

希望这是清楚的。单击时，上面的代码将在数据固定的
属性的true和false之间切换

注意：正如人们在评论中所说：注意
.data（）
不仅检查HTML
data-
属性，而且在jQuery
data
对象中查找所选元素

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
的作用）

在jQuery事件（如
.click
）中，
$（此）
指触发事件的元素，即本例中的按钮。调用
$（this）.data（'pinted'）
，就像代码在行尾所做的那样，返回与id为“pinted”的此元素关联的数据的当前值。
否定它，所以如果它是真的，我们得到假，如果它是假，我们得到真。我们从中获得的值随后被设置为新的数据属性，因此，如果它被固定，我们将其设置为不被固定

下面是一种更详细的书写方式：

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，如果设置为false，则仅隐藏旋转木马。当您将光标移回按钮上时，它将检查是否再次将“固定”设置为false，并且仅在设置为false时显示

有关jQuery数据函数的更多信息，请参阅
注意，使用
data（）
并不完全依赖于存在
数据-
attribute@charlietfl我刚才解释了什么是正确的？我应该重写吗？只是指出，如果它被用作没有属性的元素的setter，那么当用作getterNote时，它会做同样的事情。
.data（）
不仅检查HTML
data-
属性，而且还会在jQuery
data
对象中查找所选元素。我明白了，“钉住”可以是任何东西。。就像“按下”或“点击”一样，效果也一样。我原以为“钉住”有其内在的特殊性，但现在我明白了。谢谢
    .click ( function () { //Any time you click (or tap) the button
        // cancel hover effect and pin carousel
        $(this).data('pinned', !$(this).data('pinned'));

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