Javascript jQuery即使在属性更改时也会获取属性值

我有以下资料：

Javascript:

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

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

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

因此，每当我点击一个新的背景，它就会突出显示，并被赋予一个“活动”类，而之前的活动类会被删除

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

以下是HTML:

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

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

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

因此，每次单击它时，它都会告诉我值。但我需要在函数外访问该变量。。因此，它必须是全球性的

我能做些什么来获取页面开头的数据名值，而不是单击函数？当我点击一个新的BG并且激活的类被更新时，变量也会被更新吗

希望这是有道理的

---

谢谢

在函数外部声明变量，使其范围不限于click处理程序

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

的值，则必须在单击处理程序中执行上述赋值

---

您所要做的就是在单击处理程序外部定义变量，但可能在

$（document）.ready（）中定义变量，但在各种单击处理程序（或您正在使用的任何其他处理程序）中更新变量：

在这种情况下，变量将等于img的
数据名称属性，该属性具有
数据名称属性
，或者，如果不存在这样的属性，则将设置为空字符串。
您有两个选项可供选择

在全局范围内定义
var bg
，并在
内更新它。单击
处理程序

只需调用
$（“.bg.thumb\u wrapper.active img”）.attr（“数据名”）
只要您想知道
.active
的
数据名的值
代码：

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

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

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

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

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

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

当页面加载时，bg将具有该值。。并且可以从任何内部函数（如单击处理程序）访问。
如果我正确理解您的问题，是否要在页面加载时创建并设置变量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");
    });
});

这让我有点困惑…只需在全局范围中定义
var bg
，并在
中更新它。单击
处理程序。另外，使用.data，而不是.attr。。例如：$（el）.data（“name”）正在单击侦听器外部定义“bg”，并在单击时更新新引用不适用于您？由于某些原因，它将不起作用！如果我在函数中移动console.log，它会工作。。但是你的密码对我来说不起作用（这不是因为
console.log（）
语句不会被调用，因为它不在click处理程序中。上面的代码是一个可以全局访问
bg
的示例。）