jQuery如何使用从单击的div中获取的ID

Question

我在我正在建设的网站上有一个人员部分，它使用同位素进行过滤。当我点击一个人时，我想在右边显示他们的完整信息。当点击发生时，我抓住id并将其存储为变量。然后，我将变量命名为与抓取的ID匹配。

如何使用抓取的ID来定位存储在我的js文件中的变量？目前它只打印出从点击的div中获取的ID。

var userOne = "<p>userOne info<p>";
var userTwo = "<p>userTwo info<p>";
var userThree = "<p>userThree info<p>";    

$('.item').on("click", function(){
var id = $(this).attr('id'); // this grabs the ID of the div eg userOne
var printId = id; //trying to change the variable so I can use it
$('.bio').html(printID); //this is where it should print out
});

Answer 1

您无法访问这样的变量名称，而是您可以使用动态密钥访问对象的属性

假设变量userOne/userTwo在全局范围内，您可以使用括号表示法

var userOne = "<p>userOne info<p>";
var userTwo = "<p>userTwo info<p>";
var userThree = "<p>userThree info<p>";

$('.item').on("click", function () {
    var printId = window[this.id];
    $('.bio').html(printID);
});

---

另一种选择是将这些值存储为对象的属性

var user = {
    userOne: "<p>userOne info<p>",
    userTwo: "<p>userTwo info<p>",
    userThree: "<p>userThree info<p>"
};

$('.item').on("click", function () {
    var printId = user[this.id];
    $('.bio').html(printID);
});

Answer 2

尝试

HTML

<div class="item" data-user="<p>userOne info<p>"></div>

JS

$(".item").on("click", function(e) {
  $(".bio").html($(this).data("user"))
})

＆＃13;

＆＃13;

$(".item").on("click", function(e) {
  $(".bio").html($(this).data("user"))
})

＆＃13;

div:not(.bio) {
  border:1px dotted grey;
  width: 24px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" data-user="<p>userOne info<p>">1</div><br />
<div class="item" data-user="<p>userTwo info<p>">2</div><br />
<div class="item" data-user="<p>userThree info<p>">3</div><br />
<div class="bio"></div>

＆＃13;

＆＃13;

＆＃13;