我的代码显示两行类型为image的彩色输入。单击其中一个输入时,将以阴影突出显示该输入,并删除先前单击的输入上的阴影。这个jsfiddle显示它作为非ajax代码工作。
但这需要使用ajax。我设置了一个jsfiddle试图显示它但它无法运行所以我可能没有正确设置ajax代码。但是ajax在这里工作。在我的本地设置中,单击的输入被遮蔽,应该是,但先前单击的输入保持阴影。
我发现一条帖子说div需要更新,所以我添加了以下内容,但只是让div消失了。
$("#group_one").load(location.href + "#group_one");
这是完整的代码。有人可以帮帮忙吗?
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="outside.img"></div>
<form method="post" action="/echo/html/" ajax="true">
<div class='container' id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class='container' id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
<script>
var last_selected;
$("input").click(function(){
var current_selected = $(this).closest('.container').find(".selected");
$("#showid").text('previous selected = '+current_selected.attr('id'));
$(this).closest('.container').find(".selected").removeClass('selected');
$(this).addClass("selected");
});
</script
答案 0 :(得分:0)
我明白你对jsfiddle的看法,但我不知道怎么做。我想,我终于找到了一个让它运转的例子。这是更新的https://bugs.swift.org/browse/SR-3595。出于某种原因,它只适用于FF和Chrome。它已失去显示所选项目的能力。原始的jsfiddle和我的代码在这方面工作得很好,所以这个新的jsfiddle会导致问题,但我不知道如何解决这个问题。
对于这个新的jsfiddle,我需要能够点击其中一个输入并选择它(通过它周围的阴影显示)。然后,当单击该行中的不同输入时,阴影移动到它。我希望这有助于看到问题。
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showform"></div>
<script>
function ShowForm () {
$.ajax({
url: 'ajax2.php',
success: function(data) {
$("#showform").html(`
<div class="container" id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class="container" id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
`);
}
});
};
$(document).ready(function() {
ShowForm();
$("input").click(function(){
var current_selected = $(this).closest(".container").find(".selected");
$("#showid").text("previous selected = "+current_selected.attr("id"));
$(this).closest(".container").find(".selected").removeClass("selected");
$(this).addClass("selected");
});
});
</script>