Блог

я уверен, что это глупо, но я не знаю, что я делаю не так

у меня есть метод, который создает таблицу в панели asp с некоторыми элементами. Также у меня есть два события, наведение курсора мыши и щелчок, наведение курсора мыши тоже отлично работает, но css, который мне нужно установить в элементе, не отображается при четном щелчке. что я делаю неправильно, потому что я поместил оповещение в функцию и работает нормально. спасибо, что уделили время моему коду ниже.

 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');

}
  

Похоже, что стиль из события щелчка будет перезаписан стилями из события наведения. Итак, чтобы щелкнуть по 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);
    }
}
  

Функция наведения курсора мыши устанавливает ту же границу css, поэтому, возможно, выполняется SetElement, но поскольку граница уже «сплошная черная в 2 пикселя», вы не видите изменений от SetElement, также пытающегося установить границу в «сплошная черная в 2 пикселя».

Попробуйте это?
В SetElement установите границу в «3px сплошной красный».