javascript - Attribute class ends with number how to add selector in js

one text

Solution:

I have done some amendment to your code. Hope this will help you in what you are looking for. The only changes I've made is to give each of the icon an id and based on the id you can show the respective text. I have change the icon to button as for my reference. You can change it back to an icon. I've attached a fiddle for your ease of use.

JS Fiddle example latest

HTML

 <div class="cr-wrap">
    <button class="cr-icon-1" data-id="1">icon 1</button>
    <button class="cr-icon-2" data-id="2">icon 2</button>
    <button class="cr-icon-3" data-id="3">icon 3</button>
</div>

<div class="cr-wrap">
    <div class="cr-box-1 default">test1</div>
    <div class="cr-box-2">test2</div>
    <div class="cr-box-3">test3</div>
</div>

JQUERY

  $('[class^="cr-box"]').not('.default').css("opacity", "0");

        $('[class^="cr-icon"]').hover(function (i, e) {
           var id =  $(this).attr('data-id');
           var el = $('[class^="cr-box"]')[id - 1];
            $(el).css("opacity", "1");


        }, function (i, e) {
                var id = $(this).attr('data-id');
                $('[class^="cr-icon"]').each(function (i, e) {
                   
                    if (id != $(e).attr('data-id')) {
                        var el = $('[class^="cr-box"]')[id - 1];
                        $(el).not('.default').css("opacity", "0");
                    }
                });

        });