Question

我有这些按钮......使用Anthony Terrien的jQuery旋钮 http://anthonyterrien.com/knob/

这些按钮具有jQuery功能，我已添加并且已经可以切换某些样式（显示此框阴影/不显示它等）

但是我现在需要隐藏/显示输入字段的值

当单击一个div时，输入值“data-displayInput”应该为false，当单击其中一个按钮（不是同一个）时，它应该返回true，下一个应该为false。 / p>

我尝试了以下内容：

$('#button').on('click', function() {
  var hiddenField = $('#data-displayInput'),
      val = hiddenField.val();

  hiddenField.val(val === "true" ? "false" : "true");
  console.log("new value: " + hiddenField.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button"><input class="knob" value="80" data-displayInput="true"/></div>
    <div id="button"><input class="knob" value="60" data-displayInput="true"/></div>
    <div id="button"><input class="knob" value="40" data-displayInput="true"/></div>
    <div id="button"><input class="knob" value="20" data-displayInput="true"/></div>

只是不确定我错过了什么。请注意，必须单击按钮而不是输入本身。

Answer 1

也许是这样的（假设你将你的ID转换为一个班级）

$(".button").click(function(){
  $(".button").attr("data-displayInput", "false");
  $(this).attr("data-displayInput", "true");
}

这会将此类的所有其他元素切换为false，然后将单击的元素切换为true。您甚至可以向元素添加类，只需要标记它们就可以使用多组元素。 $(".button.buttonset01")

Answer 2

将id="button"更改为class="button"，因为ID必须是唯一的。要访问data-displayInput属性的值，请使用.attr(); $("#data-displayInput")选择ID为data-displayInput的元素，.val()用于访问用户输入元素的值。

由于该属性位于<input>元素，而不是<div>，因此您必须使用.find()来获取该属性。

$('.button').on('click', function() {
  $(".knob").attr('data-displayInput', 'true'); // Set others to true
  $(this).find('.knob').attr('data-displayInput', 'false'); // Set this one false
});

.knob[data-displayInput=true] {
  background-color: yellow;
}
.knob[data-displayInput=false] {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
  <input class="knob" value="80" data-displayInput="true" />
</div>
<div class="button">
  <input class="knob" value="60" data-displayInput="true" />
</div>
<div class="button">
  <input class="knob" value="40" data-displayInput="true" />
</div>
<div class="button">
  <input class="knob" value="20" data-displayInput="true" />
</div>

Answer 3

所以，在上述答案和朋友的帮助下，我今天学到了很多东西。但我基本上只是将代码更改为：

$('.button').on('click', function () {
    $(".knob").css("display", ""); // Set others to true
    $(this).find('.knob').css("display", "none"); // Set this one false
});

你可以在这里看到小提琴https://jsfiddle.net/rubixkube/rfca1yfa/2/

需要一个div的输入值从true切换到false onclick然后还原另一个div的onclick

3 个答案: