Condition to add and remove attributes from an element?

Asked

Viewed 965 times

1

I have a map and I need every time I hover over the state pointer. I’m controlling it by the attribute hidden tag image.

HTML:

<svg version="1.1" id="svg-map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="460px" viewBox="0 0 450 460" enable-background="new 0 0 450 460" xml:space="preserve">
    <g>
        <a xlink:href="#tocantins" class="tocantins">
            <path stroke="#FFFFFF" stroke-width="1.0404" stroke-linecap="round" stroke-linejoin="round" d="M289.558,235.641
                    c16.104,0.575,44.973-31.647,44.835-45.259c-0.136-13.612-17.227-58.446-22.349-66.088c-5.122-7.628-37.905,2.506-37.905,2.506
                    S234.852,233.695,289.558,235.641z"></path>
            <text transform="matrix(1 0 0 1 287.0137 188.3208)" fill="#FFFFFF"></text>
            <image width="42" height="55" style="position: absolute; top:0; left: 0;" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA3CAYAAAB6i9geAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYyQkZCQUVDOEUxQjExRTVCMjMxQ0YyNkU3MjA2NjMyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYyQkZCQUVEOEUxQjExRTVCMjMxQ0YyNkU3MjA2NjMyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjJCRkJBRUE4RTFCMTFFNUIyMzFDRjI2RTcyMDY2MzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjJCRkJBRUI4RTFCMTFFNUIyMzFDRjI2RTcyMDY2MzIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7CC2p7AAAHgElEQVR42syZ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" hidden></image>
        </a>
   </g>
</svg>

And Javascript:

$('#svg-map a').on('mouseover', function() {
    var pointer = $(this).find('image');
});
javascript

1 answer

1

You just put the Javascript tag, but as I see you are using jQuery, then you can add and remove attributes from an element using the functions attr and removeAttr, for example:

$('#svg-map a').on('mouseover', function() {
    $('#idDoElemento').attr('atributo', 'atributo');
});

In the example below (click Execute Snippet to see the snippet), when you hover over "Open button", the "Test" button will lose the attribute disabled:

$('#abrirBotao').on('mouseover', function() {
    $('#texto').removeAttr('disabled', 'disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="abrirBotao">Abrir botão</a>
<button type="button" href="#" value="Texto" disabled="disabled" id="texto">Teste</a>

Browser other questions tagged javascript

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