3

我有以下内容：

在此处输入图像描述

Javascript：

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

所以每次我点击一个新背景时，它都会突出显示并被赋予一个“活动”类，并且之前的活动类被删除。

现在我需要做的就是创建一个变量并将其设置为该活动项目的数据名称属性。

这是HTML：

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

所以如果我把它放在点击函数中，它会正常工作：

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

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

我能做些什么来获取页面开头的 data-name 的值，而不是点击功能？当我点击一个新的 BG 并更新活动类时，变量也会更新吗？

希望这是有道理的。

谢谢！

4

5 回答 5

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 时更新 的值，则必须如上所述在单击处理程序中进行分配。

现场示例

于 2012-04-09T19:07:19.643 回答
0

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

$(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带有 a 的 img 的属性data-name attribute，如果不存在，则将设置为空字符串。

于 2012-04-09T19:07:26.723 回答
0

你有两种选择，

  1. var bg在全局范围内定义并在.click处理程序内更新它
  2. $(".bg .thumb_wrapper.active img").attr("data-name");只要你想知道.active's的值就打电话data-name

代码：

var bg;
$(function () {
  $(".bg .thumb_wrapper").click(function() {
    $(".bg .thumb_wrapper").removeClass("active");
    $(this).addClass("active");
    bg = $(this).attr("data-name");
  });
});
于 2012-04-09T19:07:54.830 回答
0

首先，使用 $(el).data("name") 来获取数据属性值，而不是 .attr，如果你在启动时这样做，它将获取值，如果它在那里；

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

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

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

于 2012-04-09T19:08:19.807 回答
0

如果我正确理解您的问题，您想在页面加载时创建和设置变量 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");
    });
});
于 2012-04-09T19:10:59.223 回答