how to check for a data attribute value in jQuery-CodePudding

I want to be able to check if the data-attribute value is equal to a something - for example check if it equal to correct when the button is clicked. See my code below.

<div  data-answer="correct"></div>
<div  data-answer="incorrect"></div>
<div  data-answer="incorrect"></div>

$(".c-button").on("click", function() { 
  if ($(".js-cme-question-choice").data("answer=='correct")) {
      alert("match")
  } else {
  alert("no match")
  }
});

>show this if question right and hide if question is wrong</div>

<form action=""  method="POST" novalidate="novalidate" style="display: block; width: 100%;">
  <div  data-step="1">
    <div >
      <span >
        <span >
          <span >Question 1</span>/3 </span>
      </span>
      <h6 >Which of the following are considered to contribute to clinical inertia, and represent barriers to achieving glycemic targets?</h6>
    </div>
    <!-- /.c-card -->
    <div  style="display: none;">
      <div  data-answer="correct">
        <label >
          <span >a</span>
          <input type="radio" name="js-cme-question-1" value="a"  aria-invalid="false">
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >b</span>
          <input type="radio" name="js-cme-question-1" value="b"  aria-invalid="false">
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >c</span>
          <input type="radio" name="js-cme-question-1" value="c" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >d</span>
          <input type="radio" name="js-cme-question-1" value="d" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >s</span>
          <input type="radio" name="js-cme-question-1" value="s" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div  style="display: block;">
      <div >
        <span >
          <h6 >
            <span >a</span>
          </h6>
          <div  data-answer="incorrect">
            <label >
              <input type="radio" name="js-cme-answer-1" value=""  checked="">
              <span ></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span >
          <span >Correct</span>
        </span>
        <p>fdfsdfsdfsdfsdf ffw</p>
      </div>
      <!-- /.c-card -->
    </div>
    <!-- /.c-cme-test__reference -->
  </div>
  <!-- /.c-cme-test -->
  <div  data-step="2">
    <div >
      <span >
        <span >
          <span >Question 2</span>/3 </span>
      </span>
      <h6 >q2</h6>
    </div>
    <!-- /.c-card -->
    <div >
      <div  data-answer="incorrect">
        <label >
          <span >1</span>
          <input type="radio" name="js-cme-question-2" value="1" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >2</span>
          <input type="radio" name="js-cme-question-2" value="2"  aria-invalid="false">
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="correct">
        <label >
          <span >3</span>
          <input type="radio" name="js-cme-question-2" value="3" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div >
      <div >
        <span >
          <h6 >
            <span ></span>
          </h6>
          <div  data-answer="correct">
            <label >
              <input type="radio" name="js-cme-answer-2" value=""  checked="">
              <span ></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span >
          <span >Correct</span>
        </span>
        <p>fdfjkfhd sjdkhf dL;KJA akjlf a/jflkaf</p>
      </div>
      <!-- /.c-card -->
    </div>
    <!-- /.c-cme-test__reference -->
  </div>
  <!-- /.c-cme-test -->
  <div  data-step="3">
    <div >
      <span >
        <span >
          <span >Question 3</span>/3 </span>
      </span>
      <h6 >q3</h6>
    </div>
    <!-- /.c-card -->
    <div >
      <div  data-answer="incorrect">
        <label >
          <span >ddd</span>
          <input type="radio" name="js-cme-question-3" value="ddd" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="incorrect">
        <label >
          <span >ddd</span>
          <input type="radio" name="js-cme-question-3" value="ddd" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div  data-answer="correct">
        <label >
          <span >dd</span>
          <input type="radio" name="js-cme-question-3" value="dd" >
          <span ></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div >
      <div >
        <span >
          <h6 >
            <span ></span>
          </h6>
          <div  data-answer="correct">
            <label >
              <input type="radio" name="js-cme-answer-3" value=""  checked="">
              <span ></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span >
          <span >Correct</span>
        </span>
        <p>hrhrr</p>
      </div>
      <!-- /.c-card -->
    </div>
    <!-- /.c-cme-test__reference -->
  </div>
  <!-- /.c-cme-test -->
</form>

CodePudding user response：

Try this

$(".c-button").on("click", function() { 
  if ($(".js-cme-question-choice").data("answer")=='correct') {
      alert("match")
  } else {
  alert("no match")
  }
});

You use

$('...').data('name', 'value')

to set value and

var value = $('...').data('name')

to get the value

UPDATE

$(".js-cme-question-choice") is a collection. If you are looking for one correct:

var items = $(".js-cme-question-choice");
for (var i = 0; i < items.length; i  ) {
   if ($(items[i]).data("answer") == 'correct') {
      $(items[i]).hide()
   }
}

UPDATE2

This code give you the radio selected in each question:

$(".c-cme-test__answers-wrap input[type=radio]:checked").closest('.js-cme-question-choice')

c-cme-test__answers-wrap is the control with each group of radio buttons. In each group, we select the input radio that is checked. With this list of selected radios, we move to the closest js-cme-question-choice, which is the div having de data correct/incorrect.

So the previous list have the data that you want to check. Change "var items = ..." with this new selector and try again

UPDATE3

I update the sample. Check here https://jsfiddle.net/9j4va5t7/1/

$(document).ready(function () {
   $(".c-cme-test__answers-wrap input[type=radio]").change(function () {
      var answer = $(this).closest('.js-cme-question-choice').data('answer');
      alert(answer);
   });
});

"this" refers to the object of the event (the change event). So getting the closest question of the changed radio you can get the data only for that radio group