代码之家 › 专栏 › 技术社区 › Kyle Underhill

jQuery-单击添加表单属性

jquery

Kyle Underhill · 技术社区 · 7 年前

我正在尝试添加唯一标识符 slug 到 for 和 id

我正在使用 click 函数来查找 鼻涕虫 从每个项目中,我想将slug附加到 对于 价值与价值价值

:如果我 点击 衬衫,衬衫 modal label 在月底收到“狮子” 对于 这样地: for="input-lion" . 对输入也要进行同样的操作 .

$(".collection").on("click", ".flex-wrap", function() {
  var img = $(this)
    .find(".img")
    .attr("src");
  $(".modal")
    .find("#img")
    .attr("src", img);

  var slug = $(this)
    .find(".title")
    .text();
  $(".modal")
    .find('.label[for="' + slug + '"]')
    .text();
  $(".modal")
    .find('.image[id="' + slug + '"]')
    .text();

  return false;
});

.collection {
  display: flex;
}

.flex-wrap,
.modal {
  border: 2px solid blue;
  width: 100px;
  height: 100px;
}

img {
  max-height: 100%;
  width: 70px;
}

.modal {
  border: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collection">
  <!-- Item 1 -->
  <div class="flex-wrap">
    <div class="title">shirt</div>
    <img class="img" src="https://daks2k3a4ib2z.cloudfront.net/57e5747bd0ac813956df4e96/582d1692814bc3490b9b8296_182783026.jpg">
  </div>
  <!-- Item 2 -->
  <div class="flex-wrap">
    <div class="title">crown</div>
    <img class="img" src="https://daks2k3a4ib2z.cloudfront.net/57e5747bd0ac813956df4e96/59375539ce6a826203746f24_king-patron-contributor(color).svg">
  </div>
  <!-- Sidebar -->
  <div class="modal">
    <label class="label" for="input-">
  <input class="image" id="input-">
    </label>
    <h2 class="preview-title" id="preview-title"></h2>
    <img id="img" style="width: 70px; height: 70px;"></img>
  </div>
</div>

1 回复 | 直到 7 年前

Twisty 7 年前

$(".collection").on("click", ".flex-wrap", function() {
  var img = $(".img", this);
  $("#img").attr("src", img.attr("src"));

  var slug = $(".title", this).text().trim();
  $(".modal").find('.label').attr("for", "input-" + slug);
  $(".modal").find('.image').attr("id", "input-" + slug);

  return false;
});

$(function() {
  $(".collection").on("click", ".flex-wrap", function() {
    var img = $(".img", this).attr("src");
    $(".modal #img").attr("src", img);

    var slug = $(".title", this).text().trim();
    $(".modal").find('.label').attr("for", "input-" + slug).html(slug);
    $(".modal").find('.image').attr("id", "input-" + slug).val(slug);

    return false;
  });
});

.collection {
  display: flex;
}

.flex-wrap,
.modal {
  border: 2px solid blue;
  width: 100px;
  height: 100px;
}

img {
  max-height: 100%;
  width: 70px;
}

.modal {
  border: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collection">
  <!-- Item 1 -->
  <div class="flex-wrap">
    <div class="title">shirt</div>
    <img class="img" src="https://daks2k3a4ib2z.cloudfront.net/57e5747bd0ac813956df4e96/582d1692814bc3490b9b8296_182783026.jpg">
  </div>
  <!-- Item 2 -->
  <div class="flex-wrap">
    <div class="title">crown</div>
    <img class="img" src="https://daks2k3a4ib2z.cloudfront.net/57e5747bd0ac813956df4e96/59375539ce6a826203746f24_king-patron-contributor(color).svg">
  </div>
  <!-- Sidebar -->
  <div class="modal">
    <label class="label" for=""></label>
    <input class="image" id="" />
    <h2 class="preview-title" id="preview-title"></h2>
    <img id="img" style="width: 70px; height: 70px;"></img>
  </div>
</div>

现在还不清楚你想要实现什么。希望这有帮助。