CODEWITHSUNDEEP
jquery
Kyle Underhill
Kyle Underhill

Reputation: 109

jQuery - append form attributes on click

I am trying to add a unique identifier slug to the for and id of the modal.

I am using a click function to find the slug from each item, and I want to append the slug to the end of the for value and the id value.

For example: If I click the shirt, the modal label receives "lion" on the end of for like this: for="input-lion". The same is to be done with the input 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>

Upvotes: 0

Views: 48

Answers (1)

Twisty
Twisty

Reputation: 30893

I believe what you're looking to do is like the following.

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

You were using the attribute selector not the setter.

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

It's not exactly clear what you're trying to achieve. Hope this helps.

Upvotes: 1

Related Questions