How to Get Dynamic Id Attribute for a Button Which Is Inside a 'While' Loop

While loop in jquery of dynamic id and class

You can solve this problem, by using the $(this) selector for the one that you are clicking, and attaching an html data attribute to the div, specifying the other div that you want to change when you click it and selecting the other one with that... make sense.. probably not? Check out Solution 1 below.

The second solution is to use jQuery Event Data to pass the count variable into the event listener.

Solution 1: http://jsfiddle.net/Es4QW/8/ (this bloats your html a bit)

Solution 2: http://jsfiddle.net/CoryDanielson/Es4QW/23/

I believe the second solution is slightly more efficient, because you have slightly less HTML code, and the $(this) object is slightly smaller. Creating the map and passing it as event data, I believe, is less intensive... but... realistically... there's no difference... the second solution has cleaner HTML code, so you should use that.

Solution 3 w/ .slideToggle(): http://jsfiddle.net/CoryDanielson/Es4QW/24/

Edit: Updated solutions by passing in the selected elements instead of the selectors. Now each click event will not do a DOM lookup as it did before.

For loop - bind dynamic key to the #id

It renders with choice-id string because you add plain string as the id value, not a variable value

You can use v-bind directive or the shorthand for v-bind -> :id

<div class="radio" >
  <label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
      <input type="radio" name="optradio" v-bind:id="choice.id"> [[choice.content]]
  </label>
</div>

using shorthand <input type="radio" name="optradio" :id="choice.id">

To answer your questions in the comments.

You can ' separate 'the radios by adding them in a ' group ' using the name attribute. Radios with the same name attribute are in one group. Changing their values won't affect other radios in other groups ( with different name attributes ). See example below.

Or you can use vue v-model to separate and get the selected options.

new Vue({
  el: "#radio-app",
  data: {
    question1: '',
    question2: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://github.com/vuejs/vue-devtools"></script>
Question1:
<input type="radio" name="question1" id="q1choice1" value="choice1"/>
<input type="radio" name="question1" id="q1choice2" value="choice2"/>
Question2:
<input type="radio" name="question2" id="q2choice1" value="choice1"/>
<input type="radio" name="question2" id="q2choice2" value="choice2"/>
<hr />
<h2> Or with VUE v-model </h2>
<div id="radio-app">
Question1:
  <input type="radio" id="q1choice1vue" value="choice1" v-model="question1">
  <input type="radio" id="q1choice2vue" value="choice2" v-model="question1">
Question2:
  <input type="radio" id="q2choice1vue" value="choice1" v-model="question2">
    <input type="radio" id="q2choice2vue" value="choice2" v-model="question2">
  <div>Question 1 selected answer: {{ question1 }}</div>
  <div>Question 2  selected answer: {{ question2 }}</div>
</div>

Get Jquery Toogle button value from inside a loop

You have duplicate id and name attributes on your buttons, this will make your HTML invalid and javascript will treat them as one radio button, so you have to add the current for loop counter to make the id attribute dynamic and prevent duplicate.

this is working HTML version:

<html><head>    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>    <link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch.css" rel="stylesheet" /><style>    .switch-toggle {     width: 10em;     }
  .switch-toggle label:not(.disabled) {   cursor: pointer;  }</style></head><body>    <div class="switch-toggle switch-3 switch-candy"><input id="on-0" name="state-d-0" type="radio" checked="" title="A-101-0"><label for="on-0" onclick="">ON</label>
<input id="na-0" name="state-d-0" type="radio" disabled checked="checked">    <label for="na-0" onclick="">N/A</label>
<input id="off-0" name="state-d-0" type="radio" title="A-202-0"><label for="off-0" onclick="">OFF</label>
<a></a></div><p></p>    <div class="switch-toggle switch-3 switch-candy"><input id="on-1" name="state-d-1" type="radio" checked="" title="A-101-1"><label for="on-1" onclick="">ON</label>
<input id="na-1" name="state-d-1" type="radio" disabled checked="checked">    <label for="na-1" onclick="">N/A</label>
<input id="off-1" name="state-d-1" type="radio" title="A-202-1"><label for="off-1" onclick="">OFF</label>
<a></a></div><p></p>    <div class="switch-toggle switch-3 switch-candy"><input id="on-2" name="state-d-2" type="radio" checked="" title="A-101-2"><label for="on-2" onclick="">ON</label>
<input id="na-2" name="state-d-2" type="radio" disabled checked="checked">    <label for="na-2" onclick="">N/A</label>
<input id="off-2" name="state-d-2" type="radio" title="A-202-2"><label for="off-2" onclick="">OFF</label>
<a></a></div><p></p>

</body>
<script>    $(function() {        $(".switch-candy input[type='radio']").click(function(){            var title = $(this).attr('title');            alert(title);        });    });</script></html>

jquery dynamically genearate element id in a loop

use it like this

$suggest = $('#suggest');
for (i=0;i<array.length;i++) { 
  $suggest.append($('<li/>', {
     id:    'li'+i,
     html:  array[i]
  })); 
}

For best performance results do:

var str = '';
for (i=0;i<array.length; i++) {
   str += '<li id=\'li' + i + '\'>' + array[i] + '</li>';
}
$('#suggest').append(str);

How to Get Dynamic Id Attribute for a Button Which Is Inside a 'While' Loop

While loop in jquery of dynamic id and class

For loop - bind dynamic key to the #id

Get Jquery Toogle button value from inside a loop

jquery dynamically genearate element id in a loop

Related Topics

Leave a reply