Question

我正在尝试向模式的slug和for添加唯一标识符id。

我正在使用click函数从每个项目中找到slug，并且我想将块添加到for值和id的末尾值。

例如：如果我click衬衫，则modal label在for的尾部会收到“狮子”，如下所示： for="input-lion"。对于输入id也可以这样做。

$(".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>

Answer 1

我相信您想要做的事情如下。

$(".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>

目前尚不清楚您要实现的目标。希望这会有所帮助。

jQuery-单击时附加表单属性

1 个答案: