0

我正在使用ScrewDefaultButtons jQuery 插件来替换带有图像的复选框。该插件使用以下代码成功隐藏复选框并将其替换为选中/未选中的图像：

$('input:checkbox').screwDefaultButtons({ 
    image: "url(../../images/radio_check.png)",
    width:   14,
    height:  14
});

尝试将这些自定义复选框与使用复选框将项目标记为已完成的待办事项列表插件结合使用时，会出现我遇到的问题。当一个项目完成时，复选框被勾选，该项目通过 PHP 和 AJAX 移动到“已完成项目”列表中。

上面的代码成功替换了带有自定义图像的默认复选框，但是当新的复选框被打勾时，除了“未检查”图像更改为“检查”映像之外，没有发生任何事情。使用默认复选框，会弹出一个警报，确认您是否要移动项目，如果确认，则移动项目。

最大的问题是：如何让螺丝默认按钮复选框与我的待办事项列表的复选框功能一起工作？

这是复选框的代码：

默认复选框的输出：

<td id="checkbox_parent">
    <input id="ctdl-1852" class="todo-checkbox uncompleted" type="checkbox"></input>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

螺丝默认按钮复选框的输出：

<td id="checkbox_parent">
    <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px"> … </div>
    <input type="hidden" value="a193d8dc3a" name="cleverness_todo_complete_nonce"></input>
</td>

PHP：

protected function show_checkbox( $id, $completed = NULL, $layout = 'table', $single = '' ) {
    $permission = CTDL_Lib::check_permission( 'todo', 'complete' );
    if ( $permission === true ) {
        if ( is_admin() || $layout == 'table' ) $this->list .= '<td id="checkbox_parent">';
        if ( $completed == 1 ) {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox completed'.$single.'" checked="checked" />', esc_attr( $id ) );
        } else {
            $this->list .= sprintf( '<input type="checkbox" id="ctdl-%d" class="todo-checkbox uncompleted'.$single.'" />', esc_attr( $id ) );
        }
        $cleverness_todo_complete_nonce = wp_create_nonce( 'todocomplete' );
        $this->list .= '<input type="hidden" name="cleverness_todo_complete_nonce" value="'.esc_attr( $cleverness_todo_complete_nonce ).'" />';
        if ( is_admin() || $layout == 'table' ) $this->list .= '</td>';
    }
}

jQuery：（注意：添加.bind("click", function () {并不能解决问题）

$( '.todo-checkbox' ).click( function () {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );

编辑（07/28/13）：使用 Hauke 的第一个代码输出：

<td id="checkbox_parent">
  <div class="todo-checkbox uncompleted styledCheckbox" style="background-image: url("../../images/radio_check.png"); width: 14px; height: 14px; cursor: pointer; background-position: 0px 0px;"> … </div>
  <input type="hidden" value="a81d045af8" name="cleverness_todo_complete_nonce"></input>
</td>

单击复选框时，输出的唯一区别是背景位置的高度更改为 -14px。

4

2 回答 2

1

ScrewDefaultButtons 在实际元素周围创建一个包装 HTMLinput元素。因此，在事件处理程序中使用它时，您不能依赖于this成为必要的元素。相反，您必须先找到元素。您可以通过执行以下操作来完成此操作：inputclickinput

var inputElement;
if( $( this ).is( 'input' ) )
    inputElement = $( this );
else
    inputElement = $( this ).children().first();

找到 inputElement 后，您可以获取其id等：

var id = inputElement.attr( 'id' ).substr( 5 );   
var todoid = '#todo-' + id;
var single = inputElement.hasClass( 'single' );
if (inputElement.prop( 'checked' ) == false ) status = 0;

为了测试这一点，我在这里创建了一个小的 jsFiddle：http: //jsfiddle.net/Q8s96/3/

编辑：在 jsFiddle 我没有处理这一行：

$( '.todo-checkbox' ).prop( "checked", false );

您必须将其替换为首先检测是否将ScrewDefaultButtons 应用于复选框的内容。如果它被应用，你将不得不改变checked它的第一个孩子的属性。如果没有应用，您可以直接更改checked属性。

像这样的东西：

$( '.todo-checkbox' ).each( function () {
    if( $( this ).is( "input" ) )
        $( this ).prop( "checked", false );
    else
        $( this ).children().first().prop( "checked", false );
});
于 2013-07-27T09:54:00.663 回答
0

尝试替换$( '.todo-checkbox' ).click( function () {为$(document).on("click", '.todo-checkbox', function {（假设您有 jQuery 1.7+）：

$(document).on('click', '.todo-checkbox', function {
    var confirmed = confirm( ctdl.CONFIRMATION_CHECK );
            if ( confirmed == false ) return false;
    var status = 1;
    var id = $( this ).attr( 'id' ).substr( 5 );
    var todoid = '#todo-' + id;
    var single = $ ( this ).hasClass( 'single' );
    if ($( this ).prop( 'checked' ) == false ) status = 0;

    var data = {
        action: 'cleverness_todo_complete',
        cleverness_id: id,
        cleverness_status: status,
        _ajax_nonce: ctdl.NONCE
    };

    jQuery.post( ctdl.AJAX_URL, data, function( response ) {
        if ( single != true ) {
                    $( todoid ).fadeOut( function () {
                        $( this ).remove();
                    });
            $( '.todo-checkbox' ).prop( "checked", false );
        }
    } );
} );
于 2013-07-27T10:15:08.293 回答