Question

I am trying to use div classes to update text within the divs.

<div class="green paper 15">
<p class="desc">TEST 1</p>
</div>

<div class="blue rock 3">
<p class="desc">TEST 2</p>
</div>

<button value="0">COLOR</button>
<button value="1">CHOICE</button>

<script>
$("button").click(function () {
    var class_val = $(this).val();
        $.each('div', function(index, value) {
            $class_arr = $(this).classList;
            $new_desc = $class_arr[class_val];
            $('p.desc').text($new_desc);
        });
});
</script>

$class_arr throws an undefined error. Where am I going wrong? Thanks for your time.

Answer 1

Jquery does not have a classlist property. Try obtaining the classes as follows:

<script>
$("button").click(function () {
    var class_val = $(this).val();
        $.each('div', function(index, value) {
            $class_arr = $(this).attr('class').split(/\s+/);
            $new_desc = $class_arr[class_val];
            $('p.desc').text($new_desc);
        });
});
</script>