我有一些代码基本上是 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>
...
最佳答案
让我们分析下面的代码:
$('#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 HTMLdata-
attribute, but also looks within the jQuerydata
object for the selected element(s).
关于javascript - JQuery:$(this).data ('pinned' ) 实际上做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32168147/