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

Question

我有一些代码基本上是 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') 函数只应用于按钮。它适用于整个可见页面吗？我试图查找它，但我看不到有关将“固定”与 .data() 函数一起使用的任何信息。

我最初从这里得到代码: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>   

...

Answer 1

让我们分析下面的代码:

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

$(this).data()函数获取 data-来自 <input /> 的属性.

$(this).data('pinned')获取 data-pinned 的值值(value)。

现在，它可以是任何东西。它将在 string 中返回格式。因此，当值类似于:true :

$(this).data('pinned', !$(this).data('pinned'));

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

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

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

希望它是清楚的。上面的代码在 data-pinned 的 true 和 false 之间切换。单击时的属性。

Note: As people have said in the comments: Note that .data() does not only checks for the HTML data- attribute, but also looks within the jQuery data object for the selected element(s).