Question

我需要在div hair，eye ...中获取image元素的'actualCastId'属性。

<div class="char">   
    <img src="images/avatar/char.png">
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualCastId="1" width="99px"></div>
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualCastId="1" width="99px"></div>
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualCastId="1" width="99px"></div>
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualCastId="1" width="99px"></div>
    <div id="imputedName"></div>
</div>

我正在尝试使用它，但它只是写未定义。

charH = $("#hair").find('img').attr("actualCastId");
charN = $("#eye").find("img").attr("actualCastId");
charE = $("#nose").find("img").attr("actualCastId");
charM = $("#mouth").find("img").attr("actualCastId");

Answer 1

您需要访问data-actualCastId

charH = $("#hair img").attr("data-actualCastId");
charN = $("#hair img").attr("data-actualCastId");
charE = $("#hair img").attr("data-actualCastId");
charM = $("#hair img").attr("data-actualCastId");

或者你可以使用data()但是对于这个attr，数据必须是小写的。即actualcastid

<div class="char">   
    <img src="images/avatar/char.png">
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualcastid="1" width="99px"></div>
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualcastid="1" width="99px"></div>
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualcastid="1" width="99px"></div>
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualcastid="1" width="99px"></div>
    <div id="imputedName"></div>
</div>

charH = $("#hair img").data("actualcastid");
charN = $("#hair img").data("actualcastid");
charE = $("#hair img").data("actualcastid");
charM = $("#hair img").data("actualcastid");

Answer 2

要获取属性data-id的内容，您必须使用

eg1：$（this）.attr（＆＃34; data-id＆＃34;）; eg2：$（this）.data（＆＃34; id＆＃34;）;

Answer 3

您可以使用解决方案

解决方案1 

＆＃13;

charH = $("#hair").find('img').attr("data-actualCastId");
charN = $("#eye").find("img").attr("data-actualCastId");
charE = $("#nose").find("img").attr("data-actualCastId");
charM = $("#mouth").find("img").attr("data-actualCastId");

console.log("charH:", charH);
console.log("charN:", charN);
console.log("charE:", charE);
console.log("charHM:", charM);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="char">   
    <img src="images/avatar/char.png">
    <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualCastId="1" width="99px"></div>
    <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualCastId="1" width="99px"></div>
    <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualCastId="1" width="99px"></div>
    <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualCastId="1" width="99px"></div>
    <div id="imputedName"></div>
</div>

＆＃13;

解决方案2

＆＃13;

charH = $("#hair").find('img').data("actualcastid");
charN = $("#eye").find("img").data("actualcastid");
charE = $("#nose").find("img").data("actualcastid");
charM = $("#mouth").find("img").data("actualcastid");

console.log("charH:" , charH);
console.log("charN:" , charN);
console.log("charE:" , charE);
console.log("charM:" , charM);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="char">   
  <img src="images/avatar/char.png">
  <div id="hair" class="charH"><img src="images/avatar/h1.png" data-actualcastid="1" width="99px"></div>
  <div id="eye" class="charE"><img src="images/avatar/e1.png" data-actualcastid="1" width="99px"></div>
  <div id="nose" class="charN"><img src="images/avatar/n1.png" data-actualcastid="1" width="99px"></div>
  <div id="mouth" class="charM"><img src="images/avatar/m1.png" data-actualcastid="1" width="99px"></div>
  <div id="imputedName"></div>
</div>

＆＃13;

希望这会对你有所帮助。

Answer 4

你必须使用attr

charH = $("#hair").find('img').attr("data-actualCastId");
charN = $("#eye").find("img").attr("data-actualCastId");
charE = $("#nose").find("img").attr("data-actualCastId");
charM = $("#mouth").find("img").attr("data-actualCastId");

Answer 5

charH = $("#hair img').data("actualCastId");
charN = $("#eye img").data("actualCastId");
charE = $("#nose img").data("actualCastId");
charM = $("#mouth img").data("actualCastId");

如何获取子元素的属性值？

5 个答案: