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

Question

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.

@KrishnaPrashatt but i realy beginer, i didnt now how to do it :( — qunz666
– qunz666, Commented Apr 26, 2019 at 6:26
you mean all alert message should be different or you want to write seperate action for that? — Dhaval Panara
– Dhaval Panara, Commented Apr 26, 2019 at 6:26
Do you ant each alert box to have data that corresponds to it? — sassy_rog
– sassy_rog, Commented Apr 26, 2019 at 6:29

Pranav C Balan · Accepted Answer · 2019-04-26 06:49:19Z

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>

score 0 · Accepted Answer · 2019-04-26 06:55:30Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related