click事件jquery的问题

时间:2011-05-26 23:19:07

标签: jquery

我确定那是愚蠢的事,但我不知道我做错了什么

我有一个方法可以创建一个带有某个元素的面板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');

}

2 个答案:

答案 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”。