Change style with javascript

0 like 0 dislike
11 views
Can anyone suggest how to solve the problem

there are 5 blocks each with its own div id and style b-img

...............


when you click on it Java script changes the style to a v-img

here is a function

kodimg function(id) { document.getElementById(id).className = 'v-img'; } 


the problem is that the previous clicked div style remains v-img, and you need to he again became b-img

How could anyone do that?
by | 11 views

6 Answers

0 like 0 dislike
Option 1. Store the id of the previous pressed in (global) variable.
\r
var old_id; kodimg function(id) { if (old_id) document.getElementById(old_id).className = 'b-img'; document.getElementById(id).className = 'v-img'; old_id = id; }

Option 2. In function kodimg first of all the div to change the class on the b-img, then you need to put v-img.
\r
kodimg function(id) { for (var i = 1; i <= 5; i++) document.getElementById(i).className = 'b-img'; document.getElementById(id).className = 'v-img'; }

And, regardless of the option selected, read the first book and study material online.
by
0 like 0 dislike
To begin with, since we are talking about switching classes, it is appropriate once all the styles written in CSS:
\r
.bImg { /* here we enter the style of the div */ } .vImg { /* here write the style of the div, makotoko michou */ } 
For items after that, it is enough to specify the classes (class="..." instead of style="...").
\r
Then, with the help of the library jQuery can be a lot easier.
\r
First, you can make it easier HTML-code:
    \r
  1. Don't have to write it in the onclick handlers because they will be assigned later in the JavaScript.
  2. \r
  3. And do not have to insert id, because jQuery executes the handlers in the context of the elements: this specifies the handler to macnulty element.
  4. \r
It was like this:
\r
...\r...\r...\r...\r...\r

Became this:
\r
...\r...\r...\r...\r...\r

Second, desired is achieved with a simple JS code to jQuery:
\r
$(function(){ // after loading the document, you assign event handlers: $('div.bImg').click(function(){ // in the handler, do two things: // 1) find the previous macnulty div, cancel Jacotot $('div.vImg').removeClass('vImg').addClass('bImg'); // 2) div svejesmolotym give Jacotot $(this).removeClass('bImg').addClass('vImg'); }); }); 
by
0 like 0 dislike
Something like this:
\r
for (var i = 1; i <= 5; i++) { if (id == i) { document.getElementById(i).className = 'v-img'; } else { document.getElementById(i).className = 'b-img'; } } 
by
0 like 0 dislike
onclick="kodimg(this)" var lastkodimg=0; kodimg function(_this) { if(lastkodimg){ lastkodimg.className='bimg' } _this.className='v-img'; lastkodimg=_this; } 

\r
it works
by
0 like 0 dislike
...
...
...
...
...
\r
kodimg function(element){
document.querySelector('.current').classList.remove('current');// current class for the selected item
element.classList.add('current');
}
\r
You in the problem mess, something about styles of writing. something about classes. For example firefox'and, by analogy, for other browsers to do.
by
0 like 0 dislike
Developing the theme jQuery
function($){
$("div#id").toggle(
function(){ $(this).attr("class","vimg");},
function(){ $(this).attr("class","bimg");});
})(jQuery);
by

Related questions

0 like 0 dislike
6 answers
0 like 0 dislike
2 answers
0 like 0 dislike
2 answers
0 like 0 dislike
3 answers
0 like 0 dislike
3 answers
110,608 questions
257,186 answers
0 comments
29,056 users