我的大脑围成一圈试图解决这个问题 - 我想我需要有更大脑的人的帮助!不可否认,我是一个jQuery新手,所以我希望我的问题的解决方案相当简单。我正在尝试编写一些代码来切换div的背景图像(已经由样式表指定以引入:hover函数)。我正在影响的div也可以在问题/答案情境中切换其他div。
目前,我已经设法进入舞台(使用以下代码),jQuery会按预期更改背景图像(在本例中,来自绿色'/img/bg/nav-giclee.png'黑色'/img/bg/nav-down.png');
然而,我需要的是,任何时候只有一个div是黑色的,即选中时。在点击并变为黑色之后,即使单击另一个DIV,div也会保持黑色。我想我的目标是点击DIV重置其他DIV的背景图像(同时不干扰他们的显示/隐藏问题/答案功能)。我是否过分复杂了这个解释?!?
工作页面位于:http://sketch360test.co.uk/giclee.php/ ...非常感谢任何仁慈的帮助......
我现在使用的jquery是:
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(function() {
$("#answer .views-row").hide();
$("#question .views-row").click(function(){
var i = $(this).index();
$("#answer .views-row").eq(i).toggle("slow").siblings().hide();
$(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
});
});
答案 0 :(得分:1)
$(function() {
$("#answer .views-row").hide();
$("#question .views-row").click(function(){
var i = $(this).index();
$("#answer .views-row").eq(i).toggle("slow").siblings().hide();
$(".question").css("background-image", "url(/img/bg/nav-giclee.png)").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
});
});
另外,我建议添加/删除CSS类,而不是手动设置background-image
- 您可能会发现需要修改更多属性,即。边界。
更新
$(".question").removeClass("selected").eq(i).addClass("selected");
答案 1 :(得分:1)
使用css类来应用背景图像而不是在javascript中进行硬编码会很健康。在申请当前点击时,只需从其他div中删除此类。
$(".view-row").removeClass("backgroundDown");
$(".view-row").eq(i).addClass("backgroundDown");
答案 2 :(得分:1)
试试这个,它应该重置当前的。
<style type="text/css">
.backgroundDown {
background-image: url(/img/bg/nav-down.png);
}
</style>
<script type="text/javascript">
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(function() {
$("#answer .views-row").hide();
$("#question .views-row").click(function(){
var i = $(this).index();
$("#answer .views-row").eq(i).toggle("slow").siblings().hide();
//$(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
$(".question .backgroundDown").removeClass("backgroundDown");
$(".question").eq(i).addClass("backgroundDown");
});
});
</script>
答案 3 :(得分:0)
尝试将所有div背景'重置'为原始背景,然后将点击的背景设置为黑色
$(function() {
$("#answer .views-row").hide();
var views_row = $("#question .views-row");
views_row.click(function(){
var i = $(this).index();
$("#answer .views-row").eq(i).toggle("slow").siblings().hide();
// Add this line...
views_row.css("background-image", "url(/img/bg/nav-giclee.png)");
$(".question").eq(i).css("background-image", "url(/img/bg/nav-down.png)");
});
});