-1

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 class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="correct"></div>
<div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect"></div>
<div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect"></div>

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

class="cme-test-details-wrapper">show this if question right and hide if question is wrong</div>

<form action="" class="js-form js-cme-form" method="POST" novalidate="novalidate" style="display: block; width: 100%;">
  <div class="c-cme-test js-form-step" data-step="1">
    <div class="c-card c-card--large c-card--grey-border u-mb-4">
      <span class="c-card__count c-cme-test__count">
        <span class="c-card__count-text">
          <span class="is-active">Question 1</span>/3 </span>
      </span>
      <h6 class="h6 u-text-grey o-overlay__question">Which of the following are considered to contribute to clinical inertia, and represent barriers to achieving glycemic targets?</h6>
    </div>
    <!-- /.c-card -->
    <div class="c-cme-test__answers-wrap js-cme-answers-wrap" style="display: none;">
      <div class="o-field o-field--cme js-cme-question-choice o-field--none is-active" data-answer="correct">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">a</span>
          <input type="radio" name="js-cme-question-1" value="a" class="o-toggle__field u-hide" aria-invalid="false">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">b</span>
          <input type="radio" name="js-cme-question-1" value="b" class="o-toggle__field u-hide" aria-invalid="false">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">c</span>
          <input type="radio" name="js-cme-question-1" value="c" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">d</span>
          <input type="radio" name="js-cme-question-1" value="d" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">s</span>
          <input type="radio" name="js-cme-question-1" value="s" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div class="c-cme-test__reference js-cme-reference" style="display: block;">
      <div class="c-card c-card--large s-standard-content u-mb-4 c-cme-test__card c-cme-test__result is-active">
        <span class="c-cme-test__card--flex">
          <h6 class="h6 c-cme-test__answer-title u-mb-4">
            <span class="js-reference-title">a</span>
          </h6>
          <div class="o-field o-field--none js-cme-question-choice" data-answer="incorrect">
            <label class="o-toggle o-toggle--radio o-toggle--large o-toggle--none u-mb-0">
              <input type="radio" name="js-cme-answer-1" value="" class="o-toggle__field o-toggle__field--success u-hide" checked="">
              <span class="o-toggle__box o-toggle__box--radio"></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span class="c-badge c-badge--success c-cme-test__badge">
          <span class="c-badge__text">Correct</span>
        </span>
        <p>fdfsdfsdfsdfsdf ffw</p>
      </div>
      <!-- /.c-card -->
    </div>
    <!-- /.c-cme-test__reference -->
  </div>
  <!-- /.c-cme-test -->
  <div class="c-cme-test js-form-step is-active" data-step="2">
    <div class="c-card c-card--large c-card--grey-border u-mb-4">
      <span class="c-card__count c-cme-test__count">
        <span class="c-card__count-text">
          <span class="is-active">Question 2</span>/3 </span>
      </span>
      <h6 class="h6 u-text-grey o-overlay__question">q2</h6>
    </div>
    <!-- /.c-card -->
    <div class="c-cme-test__answers-wrap js-cme-answers-wrap">
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">1</span>
          <input type="radio" name="js-cme-question-2" value="1" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none is-active error" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">2</span>
          <input type="radio" name="js-cme-question-2" value="2" class="o-toggle__field u-hide" aria-invalid="false">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="correct">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">3</span>
          <input type="radio" name="js-cme-question-2" value="3" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div class="c-cme-test__reference js-cme-reference">
      <div class="c-card c-card--large s-standard-content u-mb-4 c-cme-test__card c-cme-test__result is-active">
        <span class="c-cme-test__card--flex">
          <h6 class="h6 c-cme-test__answer-title u-mb-4">
            <span class="js-reference-title"></span>
          </h6>
          <div class="o-field o-field--none js-cme-question-choice" data-answer="correct">
            <label class="o-toggle o-toggle--radio o-toggle--large o-toggle--none u-mb-0">
              <input type="radio" name="js-cme-answer-2" value="" class="o-toggle__field o-toggle__field--success u-hide" checked="">
              <span class="o-toggle__box o-toggle__box--radio"></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span class="c-badge c-badge--success c-cme-test__badge">
          <span class="c-badge__text">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 class="c-cme-test js-form-step" data-step="3">
    <div class="c-card c-card--large c-card--grey-border u-mb-4">
      <span class="c-card__count c-cme-test__count">
        <span class="c-card__count-text">
          <span class="is-active">Question 3</span>/3 </span>
      </span>
      <h6 class="h6 u-text-grey o-overlay__question">q3</h6>
    </div>
    <!-- /.c-card -->
    <div class="c-cme-test__answers-wrap js-cme-answers-wrap">
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">ddd</span>
          <input type="radio" name="js-cme-question-3" value="ddd" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="incorrect">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">ddd</span>
          <input type="radio" name="js-cme-question-3" value="ddd" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
      <div class="o-field o-field--cme js-cme-question-choice o-field--none" data-answer="correct">
        <label class="o-field o-field--small o-toggle o-toggle--radio o-toggle--radio-quiz o-toggle--large u-mb-0">
          <span class="o-toggle__label u-text-grey js-cme-answer-text">dd</span>
          <input type="radio" name="js-cme-question-3" value="dd" class="o-toggle__field u-hide">
          <span class="o-toggle__box o-toggle__box--radio"></span>
        </label>
      </div>
      <!-- /.o-field -->
    </div>
    <!-- /.c-cme-test__answers-wrap -->
    <div class="c-cme-test__reference js-cme-reference">
      <div class="c-card c-card--large s-standard-content u-mb-4 c-cme-test__card c-cme-test__result is-active">
        <span class="c-cme-test__card--flex">
          <h6 class="h6 c-cme-test__answer-title u-mb-4">
            <span class="js-reference-title"></span>
          </h6>
          <div class="o-field o-field--none js-cme-question-choice" data-answer="correct">
            <label class="o-toggle o-toggle--radio o-toggle--large o-toggle--none u-mb-0">
              <input type="radio" name="js-cme-answer-3" value="" class="o-toggle__field o-toggle__field--success u-hide" checked="">
              <span class="o-toggle__box o-toggle__box--radio"></span>
            </label>
          </div>
          <!-- /.o-field -->
        </span>
        <!-- /.c-cme-test__card--flex -->
        <span class="c-badge c-badge--success c-cme-test__badge">
          <span class="c-badge__text">Correct</span>
        </span>
        <p>hrhrr</p>
      </div>
      <!-- /.c-card -->
    </div>
    <!-- /.c-cme-test__reference -->
  </div>
  <!-- /.c-cme-test -->
</form>
raja
  • 25
  • 5

1 Answers1

1

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

Victor
  • 2,313
  • 2
  • 5
  • 13
  • this still returns match for all of them – raja Mar 24 '22 at 16:23
  • so i tried your method and it returns jus the first value. What if there were more than one data values with a name of "correct" – raja Mar 24 '22 at 16:27
  • I tried this and it still returns match for everything. I have been trying to figure this one out for 2 days – raja Mar 24 '22 at 17:14
  • I update the answer to hide the correct answers. Is this what are you looking for? – Victor Mar 24 '22 at 18:36
  • I have updated my post to include the HTML. There is a radio box which when you click on and press the submit button "c-button", I want to get the value of that specific data attribute. I hope this makes more sense now – raja Mar 24 '22 at 19:33
  • Yes, better now. Check my changes. I think now maybe the solution – Victor Mar 24 '22 at 22:47
  • thank you for this and updating your code. I tried your solution and amended your code so that it can get the data attribute. For the first radio button, this gets the right value of "correct" but then for the other questions after that, even though the answer is correct, it shows a data attribute of "incorrect" `$(".js-cme-next-question-button").on("click", function() { console.log($(".c-cme-test__answers-wrap input[type=radio]:checked").closest('.js-cme-question-choice').data("answer")); });` – raja Mar 24 '22 at 23:48
  • I try with this sample using your code and works fine https://jsfiddle.net/9j4va5t7/. Maybe other part of your code the problem? – Victor Mar 25 '22 at 00:39
  • it still selected all of together. I want it so that when you select the right radio box, it only shows the correct value for that one – raja Mar 25 '22 at 03:05
  • I think I now understand what you want. Check my last update – Victor Mar 25 '22 at 08:23
  • this works now - thanks Victor. I now want the ".cme-test-details-wrapper" to hide when the answer is correct and to show when the answer is not correct – raja Mar 25 '22 at 09:30
  • I think you only need hide it when is correct because when is wrong already is visible. Add an if to check for "correct" and, when true, get closest "c-cme-test" and hide: https://jsfiddle.net/9j4va5t7/2/ – Victor Mar 25 '22 at 10:52
  • it's the ` ".cme-test-details-wrapper"` that needs to be hidden. I have updated my HTML file. – raja Mar 25 '22 at 11:19
  • It's appear that there are only one item in the HTML with this class. Simply search and now yes, show or hide: https://jsfiddle.net/9j4va5t7/3/ – Victor Mar 25 '22 at 11:37
  • Thank you so much Victor, that works like a charm. Appreciate you help and support with this one – raja Mar 25 '22 at 13:59