javascript - 为生成的内容选择 a 中的父 div 属性

Question

我正在尝试在父 div 中选择一个属性，但到目前为止还没有运气。

HTML:

<div class="build">
  <div class="items">
    <div class="craft shop" qnt="1"></div>
    <div class="craft shop" qnt="5"></div>
  </div>
</div>

JS:

var ITEMS = [
{
  "item":"shop",
  "prefix":"custom",
  "icon": "shop",
  "type": "shop"}];

for (var i = 0; i < ITEMS.length; i++)
{
  var items = ITEMS[i];
  var quantity = $(".craft." + items['item']).attr("qnt");
  $(".craft." + items['item']).html
  ('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">'+
   '<i class="' + items['icon'] + '"></i>' +
   '<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>'+
   '<span class="qnt">x' + quantity +'</span>'+
   '</a>')};

所以当我使用<div class="craft shop" qnt="1"></div>时它生成这个:

<div class="craft shop" qnt="1">
  <a class="item-block item-shop" href="custom-shop.html">
    <i class="shop"></i><span class="name" data-i18n="shop">shop</span>
    <span class="qnt">x1</span>
  </a>
</div>

<div class="craft shop" qnt="5">
  <a class="item-block item-shop" href="custom-shop.html">
    <i class="shop"></i><span class="name" data-i18n="shop">shop</span>
    <span class="qnt">x5</span>
  </a>
</div>

我试图显示属性“qnt”的数量，但在选择它时遇到问题。 看看第二个 block 如何使用与第一个 block 相同的数量？

我已经尝试过:

var quantity = $(this).parent().parent().attr("qnt");

但没有成功。

代码笔中的示例:https://codepen.io/RHenri/pen/BWNVpw

Answer 1

基本上，您需要另一个循环来一次选择特定实例。这样您就可以根据该特定 div 应用数量和其他值。

您正在使用 $(".craft."+ items['item']).attr("qty") 从 div 获取 qty 属性的值，该 div 始终返回与该类名称匹配的第一个 div。然后您再次使用该名称将 html 设置为所有 div，这将相同的 html 内容添加到具有该特定名称的所有匹配 div 中。 要从每个 div 获取 Valve 并相应地添加 html，您需要另一个循环来遍历由特定类名选择的所有元素。

为此，我使用 $.each()

试试这个。

var ITEMS = [{
  "item": "shop",
  "prefix": "custom",
  "icon": "shop",
  "type": "shop"
}];

for (var i = 0; i < ITEMS.length; i++) {
  var items = ITEMS[i];
  var quantity = $(".craft." + items['item']).data("qnt");
  
  $(".craft." + items['item']).each(function(i, v) {
    var quantity = $(this).data("qnt");
    $(this).html('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">' +
      '<i class="' + items['icon'] + '"></i>' +
      '<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>' +
      '<span class="qnt">x' + quantity + '</span>' +
      '</a>')

  });
};

.item-list .item-block,
.build .item-block {
  display: block;
  color: #fff;
  margin: 0px;
  padding: 0px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.50);
  cursor: pointer;
  min-width: 220px;
  text-align: center;
  width: 300px;
}

.item-list .items .item-block i,
.build .items .item-block i {
  width: 32px;
  height: 32px;
  background-size: contain;
  float: left;
}

.item-list .item-block .name,
.build .item-block .name {
  display: inline-block;
  font-family: 'Roboto', Microsoft YaHei;
  font-size: 12px;
  line-height: 32px;
  color: #fff;
  padding: 0 5px;
  width: 135px;
  text-align: center;
}

.item-list .items .item-block i,
.build .items .item-block i {
  width: 32px;
  height: 32px;
  background-size: contain;
  float: left;
}

.none {
  display: none;
}

.item-list .item-block .qnt,
.build .item-block .qnt {
  line-height: 32px;
  display: inline-block;
  color: #ffffff;
  font-family: 'Roboto', Microsoft YaHei;
  font-weight: 400;
  padding: 0px 10px 0px 0px;
  float: right;
}

.item-shop {
  background-color: #1e7ea9;
}

.shop {
  background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/64/shop-icon.png);
  background-color: #25a9ae;
}

.craft {
  background-image: none;
  display: inline-block;
  width: 300px;
  margin: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="build">
  <div class="items">
    <div class="craft shop" data-qnt="1"></div>
    <div class="craft shop" data-qnt="5"></div>
  </div>
</div>