Question

在全局对象中，有些设置应根据特定用户输入进行更改。例如，如果您检查＆＃34;否＆＃34;对于div 1，不仅会隐藏div-one，变量的值也会更新为0.

问题在于隐藏div的功能是动态的，并使用数据来帮助找到要隐藏的正确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);
    }
});

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

Fiddle to example so far

Answer 1

我相信你所寻找的是这样的

    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/

Answer 2

我认为你已经得到了答案，但我会向你展示一些可能有用的东西。

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

如果没有对标记进行任何更改，请考虑此示例。你可以通过找出一个比你更适合的命名模式来构建它，这可能取决于你打算如何在代码的其他部分使用这些值。

DEMO

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

用动态函数覆盖jQuery Global Objevt Variable

2 个答案: