JQuery ближайший TR не выбирается - PullRequest
Новая
       6

JQuery ближайший TR не выбирается

2 голосов
/ 25 июня 2011

с использованием jquery 1.6.1

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

Звоните: 

$(".tableHighlightSelector tr td input[type='checkbox']").checkBoxTableHighlighter();

Код плагина: 

//checkbox row highlighter
jQuery.fn.checkBoxTableHighlighter = function(options){
var defaults = {  
    highlightClass: "rowhighlight"
};  
var options = $.extend(defaults, options);  

var highlight = {
    RemoveHighlightForAllNotChecked: function ($item) {
        $item.filter(':not(:checked)').closest("tr").removeClass(defaults.highlightClass);
    },
    CheckBoxRowSelect: function (e, $clicked) {
        if ($clicked.attr("checked") == true) {
            $clicked.closest("tr").addClass(defaults.highlightClass);
            highlight.RemoveHighlightForAllNotChecked($('input[name=' + $clicked.attr("name") + ']')); //when we make checkbox behave like a radio button
        }
        else
            $clicked.closest("tr").removeClass(defaults.highlightClass);
    }
}
return this.each(function() {  
    var $obj = $(this);
    var jsObj = this;   
    //onload
    highlight.CheckBoxRowSelect('', $obj);     
    //click
    $obj.click(function(){
        highlight.CheckBoxRowSelect(e, $(this));
    }); 
    //keyup
    $obj.keyup(function(){
        highlight.CheckBoxRowSelect(e, $(this));
    });         
});
};

HTML: 

<table width="300px" class="tableHighlightSelector">
            <tr>
                <td colspan="2">Group 2</td>
            </tr>
            <tr>
                <td width="20px"><input type="checkbox" name="group2" value="a" checked="checked" /></td>
                <td>A</td>
            </tr>
            <tr>
                <td width="20px"><input type="checkbox" name="group2" value="b" /></td>
                <td>B</td>
            </tr>
            <tr>
                <td width="20px"><input type="checkbox" name="group2" value="c" /></td>
                <td>C</td>
            </tr>
            <tr>
                <td width="20px"><input type="checkbox" name="group2" value="d" /></td>
                <td>D</td>
            </tr>
        </table>

1 Ответ

1 голос
/ 25 июня 2011

Я предполагаю, что вы определили класс .rowhighlight CSS?Я вставил это в jsFiddle, и подсветка сразу сработала для <input checked="checked">!

. В обработчиках кликов отсутствовали некоторые переменные события, о которых консоль Chrome сообщала немедленно. 

$obj.click(function(e /* added e here */) {
    highlight.CheckBoxRowSelect(e, $(this));
});

Iпредположим, что это ошибка копирования и вставки, иначе вы никогда не попадете в основную функцию CheckBoxRowSelect.

Основная проблема в целом заключается в проверке, проверена ли входная логика , котораяневерен.Есть несколько способов проверить, проверен ли ввод в jQuery , и ваш тест не работал.Замена на if ($clicked.is(':checked')) {, как я сделал в , это демо исправляет логику, и строка выделяется.

...