Question

我已经设置了一个工作空间区域，代表一个空白的PDF页面，用户可以使用单选按钮选择纸张大小，使用单选按钮选择横向或纵向方向，使用复选框选择个人动机和目标语句。用户检查/取消选中他们想要放置在工作区上的语句，并且还能够拖放它们。

当用户更改方向时，我需要简单保存所有已检查的语句项，我将其放入数组中。然后取消选中要添加的语句的所有复选框（这都有效）并从工作区中删除所有语句（这不起作用）。我需要循环遍历数组以返回并检查复选框（这是有效的）并调用BoardElement函数（这不起作用）来运行ajax调用。

我正在使用的相关代码如下，并尝试了不同帖子的许多建议。 OrientationChange函数是我用来尝试保存，删除和调用获取元素的BoardElement。

感谢。

HTML

            <h3>Paper Size</h3>
            <input type="radio" name="paper_size" id="paper_size1" value="8-5x11" checked="checked" />            
            8.5&quot;x11&quot;
            &nbsp; <input type="radio" name="paper_size" id="paper_size2" value="11x17" />            
            11&quot;x17&quot;

        </fieldset>

        <fieldset>

            <h3>Orientation</h3>
                <input type="radio" name="orientation" id="orientation1" value="l" checked="checked" /> Landscape
                &nbsp; <input type="radio" name="orientation" id="orientation2" value="p" /> Portrait

        </fieldset>

        <fieldset>

            <h3>Elements</h3>
                <input type="checkbox" name="board_element_cb" id="board_ele_0" value="0" /> "Who Am I" Image&nbsp; 
                <input type="checkbox" name="board_element_cb" id="board_ele_1" value="1" /> "Who Am I" Text&nbsp; 
                <input type="checkbox" name="board_element_cb" id="board_ele_2" value="2" /> Mission Statement&nbsp; 
        </fieldset>

的jQuery

$(document).ready
(
function ()
{
BoardElement = function ()
{
    var elements_array = new Array('wai_img_', 'wai_text_', 'mission_text_', 'affirmation_text_', 'gratitude_text_', 'role_model_');
    if ($(this).is(':checked'))
    {
        var data_string = 'board_element=' + $(this).val();
        $.ajax
        ({
            type: 'POST',
            url: 'get_board_element_ajax.php',
            data: data_string,
            success: function(html)
            {
                $('#board_area').append(html);
                $('.draggable_item').draggable
                ({
                    containment: '#board_area',
                    stack: '#board_area div'
                });
            }
        });
    }
    else
    {
        var checked_value = $(this).val();
        $('.draggable_item').each
        (
        function ()
        {
            if (this.id.indexOf(elements_array[checked_value]) > -1)
            {
                $('#' + this.id).remove();
            }
        });
    }
}
$('input[id^=board_ele_]').click(BoardElement);


// save, remove and get selected board items on orientation change
OrientationChange = function ()
{
    var board_ele_array = new Array();
    // save
    $('input[id^=board_ele_]').each
    (
    function (i)
    {
        if ($('#board_ele_' + i).is(':checked'))
        {
            $('#board_ele_' + i).attr('checked', false);
            board_ele_array.push(i);
            $('#board_ele_' + i).attr('checked', false);
        }
    });
    //for (var j = 0; j < board_ele_array.length; j++)
    //{
    var j = 0;
    function BoardEleCheckbox ()
    {
        if (j < board_ele_array.length)
        {
            $('#board_ele_' + board_ele_array[j]).attr('checked', true);
            //$('#board_ele_' + board_ele_array[j]).click();
            //BoardElement();
            $('#board_ele_' + board_ele_array[j]).click(BoardElement);
            j++;
            setTimeout(BoardEleCheckbox, 1000);
        }
    }
    setTimeout(BoardEleCheckbox, 1000);
    //}
}
$('input[name=orientation]').click(OrientationChange);

});

Answer 1

你试过了吗？

$('#board_ele_' + i).removeAttr('checked');
BoardElement.call($('#board_ele_' + i).get(0));
board_ele_array.push(i);

然后：

$('#board_ele_' + board_ele_array[j]).attr('checked', 'checked');
BoardElement.call($('#board_ele_' + board_ele_array[j]).get(0));
j++;
setTimeout(BoardEleCheckbox, 1000);

一旦为该元素分配了一个处理程序，就可以使用no-args调用来调用它，因此click()。

修改：http://jsfiddle.net/uxqWv/3/

修改2 ：http://jsfiddle.net/uxqWv/7/

当您单击复选框时，首先状态发生变化，然后处理程序被触发。看来，当你通过jQuery调用click处理程序时，反过来也是如此。因此，处理程序认为您只是选中了按钮，并添加了另一个板元素。要解决此问题，您必须使用javascript call对象的Function方法手动调用复选框上的处理程序。

jquery模拟点击，复选框和调用功能

1 个答案: