我有两个图像,当我单击 green.png 时,它会更改为 red.png。但是当我加载页面并且它已经设置为 red.png 时,我需要在它更改之前单击该 img 两次。我只想单击一次。
$(".page-state").toggle(function(event){
this.src = "images/red.png";
var id = event.target.id; //the Div ID variable
var dataString = 'page='+ id + '&view=off';
$.ajax({
type: "POST",
url: "pageState.php",
data: dataString,
cache: false,
});
$('#mainFrame')
.attr('src', $('iframe')
.attr('src'))
}, function(event) {
this.src = "images/green.png";
var id = event.target.id; //the Div ID variable
var dataString = 'page='+ id + '&view=on';
$.ajax({
type: "POST",
url: "pageState.php",
data: dataString,
cache: false,
});
$('#mainFrame')
.attr('src', $('iframe')
.attr('src'))
});
我该如何改进?
最佳答案
jQuery:
$(".page-state").click( function() {
var s = $(this).attr("class").split(" ");
if(s[1] == 'red') {
this.src = 'green.png';
$(this).removeClass('red').addClass('green');
// more code for green
}
else {
this.src = 'red.png';
$(this).removeClass('green').addClass('red');
// more code for red image
}
});
HTML:
<img class="page-state red" src="red.png" />
正如您所看到的,.page-state
具有指示默认情况下由红色或蓝色组成的类。
关于javascript - jQuery Img 切换 Ajax 帖子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14784677/