我确定那是愚蠢的事,但我不知道我做错了什么
我有一个方法可以创建一个带有某个元素的面板asp的表。此外,我有两个事件,悬停和单击悬停工作也很好,但我需要在元素中设置的CSS不会出现甚至它的点击。我做错了什么因为我在功能中发出警报并且工作正常。谢谢你的时间mi代码。
function buildImageGallery(data) {
//boring code
$(".pnlImage tr").remove();
var tableSelector = '<table class="tableFinder" id="imageSelectorPanel">';
tableSelector = tableSelector + '<tr>';
var imagesData = data.d.split(";");
for (var i = 0; i < imagesData.length; i++) {
if (i != imagesData.length - 1) {
var image = imagesData[i].split(",");
tableSelector = tableSelector + '<td>' + '<div id="' + image[0] + '" '
+ 'class="imagePanel" style="background:url(' + image[1]
+ ');background-repeat:no-repeat;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;">' + "</div>" + "</td>";
}
}
tableSelector = tableSelector + '</tr>';
tableSelector = tableSelector + '</table>';
$(".pnlImage").append(tableSelector);
//the two events
$(".imagePanel").hover(mouseOver, mouseOut);
$(".imagePanel").click(setElement);
}
function mouseOver() {
$(this).stop(true, true).animate({
opacity: 0.25
}, 100, function () {
$(this).css('border', '2px solid black');
});
}
function mouseOut() {
$(this).stop(true, true).css('border', '0 none').animate({
opacity: 1
}, 100);
}
//this method executes but don't add the style
function setElement() {
// alert("click the element with id: " + this.id);
$(this).css('border', '2px solid black');
}
答案 0 :(得分:4)
看起来来自click事件的样式将被悬停事件中的样式覆盖。因此,要点击div,首先触发mouseOver()
,边框设置为2px solid black
。然后单击,setElement()
功能将边框重新设置为2px solid black
。你没有看到任何变化。然后将光标移离div以查看更改,然后触发mouseOut()
将删除边框。
我假设你想要的是边界一旦点击div就会持续存在。您可以在div上设置某种数据属性,以表明它已被选中。
function setElement() {
$(this).css('border', '2px solid black').data('selected', true);
}
然后在mouseOut()
函数中检查它。
function mouseOut()
{
if (!$(this).data('selected')) {
$(this).stop(true, true).css('border', '0 none').animate({ opacity: 1}, 100);
}
}
答案 1 :(得分:1)
mouseOver函数设置相同的css边框,所以也许setElement正在执行,但由于边框已经是“2px solid black”,因此你没有看到setElement的变化也试图将边框设置为“2px solid black”。
试试这个?
在setElement中,将border设置为“3px solid red”。