Pull element that has a specific attribute with javascript

Asked

Viewed 232 times

-1

I have a page that there are four Divs, all with class . coloritem:

<div class="coloritemSelected" style="background: Vermelho;" onclick="javascript:showOptionsFor('Vermelho');">&nbsp;</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Azul');">&nbsp;</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Púrpura');">&nbsp;</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Laranja');">&nbsp;</div>

I wonder if there’s any way to take only the div that has such a color, like Red and change it to have the background: red;

I was testing with that code, but he ends up putting the color on all the Divs:

$(document).ready(function () {
    var item = $('.coloritem');
    var background = item.attr('style');
    if (background == 'background:Vermelho;') {
        $(item).css('background', 'red');
    };
});

From now on I appreciate any help.

javascript jquery

  • Is there a click event for example that triggers this change?

  • I was thinking of performing this event when the page loads, since when loading the Divs appear blank.

  • 1

    Puts colors in a type attribute data instead of style, for example: data-cor="vermelho", from there on jQuery you read this property through the $('.coloritem').data('cor')...

  • Pera you will run a JS to change the colors when the page loads? Why not create a class for each color and already leave in the right Ivs?

  • @Pauloimon the point is that the page I’m working on is a store template, and I’ve looked for the location of the element in the directory, but I couldn’t find it (the pages are all separate, with the extension. tpl)

  • I don’t understand what you want to happen, when one clicks on showOptionsFor, what should happen?

  • 1

    Thanks for everyone who tried to help, I was able to find the source of the archive, so I was able to do what I planned with the tip @Pauloimon gave.

Show 2 more comments

2 answers

1

Come on. To understand why all Ivs are being affected, just understand this line of your code:

var item = $('.coloritem');

If you give a console.log(item); will notice an Array of items, why this selector recovered all items that have as class .coloritem.

To solve this, you will need to use something that tells you exactly what element you want. Fortunately jQuery has exactly the method filter(); This method takes a string that will be used as a selector, hence its return will be only objects that have such a selector within an existing selector.. That is to say:

var item = $('.coloritem');
var t = item.filter('style["background: Vermelho;"]'); // aqui terá apenas o item cujo style seja background Vermelho

Now you can change the color of the object t normally.

I hope I’ve helped.

(See the comment of Paulo Imon. It will look more elegant the solution)

  • Thanks for the answer, I did not know this jQuery method.

0

There is however your example is wrong, and you are only taking 1 element with the class coloritem see this example, where I go through all the elements that have this class and check if there is a certain string, if there is a substitution:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="coloritem coloritemSelected" style="background: Vermelho;" onclick="javascript:showOptionsFor('Vermelho');">&nbsp;
</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Azul');">&nbsp;</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Púrpura');">&nbsp;</div>
<div class="coloritem" style="background: red;" onclick="javascript:showOptionsFor('Laranja');">&nbsp;</div>

<script>
    $(document).ready(function () {
        var item = $('.coloritem');
        $.each(item, function() {
            
            if($(this).attr('style') === 'background: Vermelho;') {
                $(this).attr('style','background: red;')
            }
        });
    });
</script>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.