JQuery Mimic флажок с изображением и использовать существующие функции флажка - PullRequest
Новая
       11

JQuery Mimic флажок с изображением и использовать существующие функции флажка

1 голос
/ 08 января 2011

У меня есть отличная рабочая функция, позволяющая проверять, нажимает ли кто-нибудь флажок на моей странице и что-то делает.Контейнер, в котором находится флажок, также имеет уменьшенное изображение рядом с ним, и я хочу попытаться выяснить способ, которым я могу имитировать те же функции, которые я использую, когда я нажимаю фактический флажок, когда я нажимаю на изображение.Он должен переключаться так же, как флажок, выбирая его и выполняя все другие действия, которые он выполняет сейчас:

Вот мой текущий код jquery для функции щелчка флажка: 

// Checkbox Actions - If a Checkbox is checked or not
    $(":checkbox").click(function() {
         var checkedState = $(this).is(':checked');
         var product = $(this).attr("name");
         var newName = '.' + product ;
         var productImg = '.' + product + '-img';

         // Check List Count and Show/Hide Sections
         var currentCount = countChecked();
         if (currentCount == 0) {
             $(newName).css("display", "none");
             $("#noProducts").delay(1).fadeIn(350);
             $("#listContainer").removeClass("listContainerProducts");
             $("#haveProducts").css("display", "none");
             checkIfScrollable();
         }

         // Hide the No Products Container if List Count is Greated than 0
         if (currentCount > 0) {
             $("#noProducts").css("display", "none");
             $("#haveProducts").css("display", "");
             checkIfScrollable();
         }

         // Check the checkbox state and select/show correct items in the List if selected
        if (checkedState == true) {
            var productName = $(this).attr("title");
            var productClassName = $(this).attr("name");
            $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
            $(".listBoxContainer").fadeIn(350);

            // Change the Image Wrapper to be Selected if checked - Green Border
            $(productImg).addClass("imageBoxTopSelected");
            $("#listContainer").addClass("listContainerProducts");
            $(newName).css("background", "#FFFFFF");
         }

         // If checkbox is not checked
         if (checkedState == false) {
            $(newName).fadeOut(500, function() { $(this).remove()});
            $(productImg).removeClass("imageBoxTopSelected");
            checkIfScrollable();
         }
    });

Я знаю, что мой jquery не оптимизирован (jquery nobe), но он делает то, что мне нужно.

Просто нужно придумать способ имитировать флажок нажатием на картинку.

Есть идеи?Спасибо

1 Ответ

1 голос
/ 08 января 2011

Я не совсем уверен в том, что вы просите.Это просто, что вы хотите вызвать клик на флажок, когда вы нажмете на изображение? 

$("#mythumb").click(function(){
  // well here the selector is certainly too big, you need to get only 
  // the related checkbox. Maybe you could store a rel="checkboxid" attribute on 
  // the thumb and get it with:
  // var checkid=$(this).attr("rel");
  // or find th checkbox in the DOM near you image with stuff like
  // var mychk = $(":checkbox",$(this).parent('div'));
  $(":checkbox").trigger('click');
  // or
  $(":checkbox").click();
};

Редактировать: Новая попытка (и повторно edit , поскольку я забыл использовать triggerHandler вместо trigger - и синтаксическую ошибку): 

$("#mythumb").click(function(){
  var mychk = $(":checkbox",$(this).parent('div'));
  // toggle checked attribute
  mychk.attr('checked', !mychk.is(":checked"));
  // trigger the click event without effectively clicking.
  // this way the behaviour is the same in old IE and FF
  mychk.triggerHandler('click');
});
...