Question

我正在使用jQuery来检索和设置我的数据属性。我也尝试使用attr()和data()设置数据值：

$("#select2").attr("data-myval", "true");
$("#select2").data("myval", "true");

两者都不起作用，如果我console.log()它会返回一个函数。有什么问题？

$(document).ready(function() {
  var select1 = $("#select1").data("myval");
  var select2 = $("#select2").data("myval");

  console.log(select1);
  console.log(select2);

  $("#select1").click(function() {
    $(this).children("p").css("display", "block");
    $("#select2").data("myval", "true");
  });

  if (select2 == "true") {
    $("#select2").click(function() {
      $(this).children("p").css("display", "block");
    });
  } else {

  }
});

#select1,
#select2 {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  color: white;
  margin: 20px;
  display: inline-block;
}

div.ex p {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ex" id="select1" data-myval="true">
  <p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
  <p>Text2</p>
</div>

Answer 1

此处没有事件订单，第一个框只有一个事件。永远不会附加第二个框的事件，因为if (select2 == "true")在false时为$(document).ready并且它仍然是布尔值而不是字符串。您可以将其移至事件内部并将其更改为if ($(this).data("myval"))：

$(document).ready(function() {
  $("#select1").click(function() {
    $(this).children("p").css("display", "block");
    $("#select2").data("myval", "true");
  });

  $("#select2").click(function() {
    if ($(this).data("myval")) {
      $(this).children("p").css("display", "block");
    } else {

    }
  });
});

#select1,
#select2 {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  color: white;
  margin: 20px;
  display: inline-block;
}

div.ex p {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ex" id="select1" data-myval="true">
  <p>Text1</p>
</div>
<div class="ex" id="select2" data-myval="false">
  <p>Text2</p>
</div>

或者，你可以在第一个事件中添加第二个，但是为了避免多次添加它，如果你多次点击第一个框，你必须先用off("click")删除它然后添加它。

为什么这些HMTL5数据属性会返回一个函数而不是指定的值？

1 个答案: