在动态函数中覆盖jQuery全局对象变量

Overwriting jQuery Global Objevt Variable WIthin Dynamic Function

本文关键字：全局 对象 变量 jQuery 覆盖 动态 函数      更新时间：2023-09-26

在全局对象中，应该根据某些用户输入更改设置。例如，如果你为div 1选择了"no"，那么div- 1不仅会被隐藏，而且变量的值也会被更新为0。

问题是隐藏div的函数是动态的，并且使用data-来帮助找到要隐藏的适当div。我在覆盖适当的全局变量时遇到麻烦。

我已经尝试了一些事情，比如添加标记来帮助目标特定的变量，但它没有正常工作。

HTML 

<p>Div 1</p>
<input class="toggle" data-target=".div-one" type="radio" name="enableDivOne" value="yes" checked><span>Yes</span>
<input class="toggle" data-target=".div-one" type="radio" name="enableDivOne" value="no">
<span>No</span>
<p>Div 2</p>
<input class="toggle" data-target=".div-two" type="radio" name="enableDivTwo" value="yes" checked><span>Yes</span>
<input class="toggle" data-target=".div-two" type="radio" name="enableDivTwo" value="no">
<span>No</span>
<div class="div-one">One</div>
<div class="div-two">Two</div>
CSS 

div {
    width: 300px;
    height: 300px;
    background: black;
    color: white;
    margin: 10px;
}
jQuery 

var settings = {
    enableDivOne: 1, // overwrite this when div 1 option is changed
    enableDivTwo: 1 // overwrite this when div 2 option is changed
};
$('.toggle').change(function () {
    var target = $(this).data("target"),
        element = $(this),
        name = element.val(),
        is_checked = element.prop('checked'),
        setting = $(this).data("setting");
    if  (name == 'yes') {
        $(target).slideDown(300);
        console.log(settings.enableDivOne);
        console.log(settings.enableDivTwo);
    } else {
        $(target).slideUp(300);
        console.log(settings.enableDivOne);
        console.log(settings.enableDivTwo);
    }
});

总而言之，我正在试图找出一种动态的方法来改变某些变量。

到目前为止的例子

我相信你要找的是这样的东西

    var settings = {
    enableDivOne: 1,
    enableDivTwo: 1
};
$('input:radio.toggle').change(function(e) {
    var target = $('#div-' + $(this).data("target")),
        value = $(this).val();
    settings[$(this).prop('name')] = value;
    target.slideToggle(300);
    console.log("div one :" + settings.enableDivOne);
    console.log("div two :" + settings.enableDivTwo);
});

我把你的目标标记从

data-target=".div-one"


data-target="one"

作为个人偏好;感觉更有语义性

你可以在这里测试它:https://jsfiddle.net/v43hy5ye/

我想你已经大致得到了答案，但我将向你展示一些可能有所帮助的东西。

对象属性实际上只是字符串。当它们是有效的JavaScript标识符时，可以使用点表示法访问它们，当它们变得更复杂时，可以使用括号表示法访问它们。这意味着您可以使用标记中的任何常量值作为引用点。在您的示例中，两个不同的常量是对单选按钮进行分组的name属性。

在不更改标记的情况下，考虑以下示例。您可以通过找出适合您的命名模式来构建这些值，这可能取决于您计划如何在代码的其他部分中使用这些值。

演示

var boolMap = {
  'yes': true,
  'no': false
};
var settings = {};
$('.toggle').change(function () {
  var target = $(this).data('target'),
      name = $(this).attr('name'),
      value = $(this).val();
  if (boolMap[value]) {
    $(target).slideDown(300);
  } else {
    $(target).slideUp(300);
  }
  
  settings[name] = (boolMap[value] ? 1 : 0);
  
  console.log(settings);
});
div {
    width: 300px;
    height: 300px;
    background: black;
    color: white;
    margin: 10px;
}
<p>Div 1</p>
<input class="toggle" data-target=".div-one" type="radio" name="enableDivOne" value="yes" checked><span>Yes</span>
<input class="toggle" data-target=".div-one" type="radio" name="enableDivOne" value="no">
<span>No</span>
<p>Div 2</p>
<input class="toggle" data-target=".div-two" type="radio" name="enableDivTwo" value="yes" checked><span>Yes</span>
<input class="toggle" data-target=".div-two" type="radio" name="enableDivTwo" value="no">
<span>No</span>
<div class="div-one">One</div>
<div class="div-two">Two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：