jQuery获取属性值，即使它发生了变化

Question

我有以下内容：

使用Javascript：

$(".bg .thumb_wrapper").click(function() {
    $(".bg .thumb_wrapper").removeClass("active");
    $(this).addClass("active");
});

因此，每次点击新背景时，它都会突出显示并被赋予“活动”类，并删除之前的活动类。

现在我需要做的就是创建一个变量并将其设置为该活动项的data-name属性。

以下是HTML：

<div class="thumb_wrapper active">
    <img src="images/backgrounds/thumb/bg2.jpg" data-name="bg2.jpg">
</div>

因此，如果我将它放在click函数中，它将正常工作：

var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
console.log(bg);

所以每次点击它都会告诉我价值。但我需要在该函数之外访问该变量..所以它需要是全局的。

我有什么办法可以在页面开头抓取data-name的值，而不是点击功能？当我点击新BG并更新活动类时，变量也会更新吗？

希望这是有道理的。

谢谢！

Answer 1

在函数外部声明变量，因此其范围不限于单击处理程序。

var bg;

$(".bg .thumb_wrapper").click(function() {
   $(".bg .thumb_wrapper").removeClass("active");
   $(this).addClass("active");
   bg = $(".bg .thumb_wrapper.active img").data("name");
});

console.log(bg); //accessible outside

如果您希望每次点击新BG时都更新bg的值，您必须在上面的点击处理程序中进行分配。

Live Example

Answer 2

您所要做的就是在点击处理程序之外定义变量，但可能在$(document).ready()内，但在各种点击处理程序（或您正在使用的其他处理程序）中更新它：< / p>

$(document).ready(function(){
var bg = $(".bg .thumb_wrapper.active img['data-name']").attr("data-name") || '';
/* all the other JavaScript/jQuery, click handlers and so forth... */
});

在这种情况下，变量将等于带有data-name的img的data-name attribute属性，或者如果不存在，则将设置为空字符串。

Answer 3

您有两种选择，

1. 在全局范围内定义var bg并在.click处理程序
中更新它
2. 只要您想了解$(".bg .thumb_wrapper.active img").attr("data-name");的{​​{1}}
的价值，只需致电.active即可

<强> CODE：

data-name

Answer 4

首先，使用$（el）.data（“name”）来获取数据属性值，而不是.attr，如果你在启动时这样做，它将获得值，如果它在那里;

Javascript是功能范围的，这意味着当您在单击处理程序的函数中定义它时，您将无法从该函数外部进行访问。而是定义变量并在更高的范围内分配，如DOM Ready，如下所示：

$(function() {
    var bg = $(".bg .thumb_wrapper.active img").data("name");
});

bg将在页面加载时具有值。可以从任何内部函数访问，例如单击处理程序。

Answer 5

如果我理解你的问题，你想在页面加载时创建和设置变量bg，然后在每次点击缩略图时更新它吗？

如果是这样，这应该有效：

$(document).ready(function() {
    var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
    $(".bg .thumb_wrapper").click(function() {
        $(".bg .thumb_wrapper").removeClass("active");
        $(this).addClass("active");
        bg = $(this).attr("data-name");
    });
});