Question

我很确定解决方案是盯着我看，但我看不到它！

这就是我想要实现的目标：

单击div时，找到单击的div的值（不是文本），然后控制台将其注销。但是当我这样做时，它会返回一个空值。

我做错了什么？提前谢谢。

HTML

<div id="d4" class="dice" value="4">?</div>
<div id="d6" class="dice" value="6">?</div>
<div id="d8" class="dice" value="8">?</div>

JS

$(document).ready(function() {
 $('.dice').click(function() {
  var currentDice = $(this).val();
  console.log(currentDice);
 });
});

Answer 1

.val()用于表单元素（输入，选择等），它们实际上具有关联的真实名称值对。因为您正在使用div，所以您应该获得值（.attr('value')）的属性：

话虽如此，虽然有效，但您确实应该使用data-属性来表示元素的自定义属性（例如：data-value="4"）：

＆＃13;

$(document).ready(function() {
  $('.dice').click(function() {
    var currentDice = $(this).attr('data-value');
    console.log(currentDice);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d4" class="dice" data-value="4">?</div>
<div id="d6" class="dice" data-value="6">?</div>
<div id="d8" class="dice" data-value="8">?</div>

＆＃13;

Answer 2

你应该使用“attr”

$(document).ready(function() {
  $('.dice').click(function() {
  var currentDice = $(this).attr("value");
    console.log(currentDice);
  });
});

Answer 3

尝试：

$('.dice').click(function() {
  var currentDice = $(this).attr('value');
  console.log(currentDice);
});

Answer 4

value不是<div>元素的有效属性（请参阅spec）。不要使用无效属性来混淆DOM，而是使用data-：

<div id="d4" class="dice" data-value="4">?</div>
<div id="d6" class="dice" data-value="6">?</div>
<div id="d8" class="dice" data-value="8">?</div>

jQuery的val()函数不是attr()或类似函数的插件。如果您更新标记以使用data-属性，则可以使用jQuery的data()函数，如下所示：

$(function() {
    $('.dice').click(function() {
        var currentDice = $(this).data('value');
        console.log(currentDice);
    });
});

Answer 5

value不是div属性，因此我建议您在添加costum属性时使用data-*属性，例如：

<div id="d4" class="dice" data-value="4">?</div>

然后在你的js中使用jQuery方法.data()：

$(this).data('value');

希望这有帮助。

＆＃13;

$(function() {
  $('.dice').on('click', function() {
    console.log($(this).data('value'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="d4" class="dice" data-value="4">?</div>
<div id="d6" class="dice" data-value="6">?</div>
<div id="d8" class="dice" data-value="8">?</div>

＆＃13;

试图找到一个单击的div的值，而是返回空

5 个答案: