CODEWITHSUNDEEP
javascriptjqueryhtmlcss
qunz666
qunz666

Reputation: 310

JS How to create for separate button from loop separate action?

I work with loops at jQuery, and i create loop for creating some box in which i have values.

Problem is, i create boxes, and for this boxses i take value from array, and for each value i must have action for example call allert.

My code:

var mokData = [
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' }
];

$.each(mokData, function (i) {
var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button class="tes">Start</button></article>';
    $('#favoriteCards').append(templateString);
});

$(".tes").on("click", function () {
    alert("Click");
});
.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="cards">
    <div id="favoriteCards"></div>
</main>

As u can see i have action for button, but this not correct because i want for separate button separate alert with data from array.

Upvotes: 2

Views: 72

Answers (2)

user11264432
user11264432

Reputation:

If you want to return different values ​​for each card, you need to do it this way. 

var mokData = [
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Material", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of machine' },
{ category: "Tool", id: 'Code0-1', name: 'Brakedown of line' }
];

$.each(mokData, function (i) {
var templateString = `<article class='card ${i}'><h2>` + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + i + '</p><button class="tes">Start</button></article>';
    $('#favoriteCards').append(templateString);
});


let doc = document.querySelectorAll(".card");
doc.forEach((x)=> x.addEventListener("click",function(){
  alert(x.className);
}))
  .cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <main class="cards">
      <div id="favoriteCards"></div>
  </main>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115232

Add data to be alerted as a custom attribute(data-*) to the element and get it when you want to alert. In addition to that in jQuery.each callback second argument is the element to add a second parameter(or even this can be used) and use it for the referring element instead of getting by index.

var mokData = [{"category":"Material","id":"Code0-1","name":"Brakedown of machine"},{"category":"Material","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"},{"category":"Tool","id":"Code0-1","name":"Brakedown of machine"},{"category":"Tool","id":"Code0-1","name":"Brakedown of line"}];

$.each(mokData, function() {
  var templateString = '<article class="card"><h2>' + this.category + '</h2><p>' + this.name + '</p><p>' + this.id + '</p><button class="tes" data-alert="' + this.name  + '">Start</button></article>';
  $('#favoriteCards').append(templateString);
});

$(".tes").on("click", function() {
  alert($(this).data('alert'));
});
.cards {
  margin: -1rem;
}

.card {
  width: 220px;
  float: left;
  margin: 1rem;
  border: 1px solid #d3d3d3;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}

@supports (display: grid) {
  .cards {
    margin: 0;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="cards">
  <div id="favoriteCards"></div>
</main>

Upvotes: 2

Related Questions