将$(this)解析为JQuery / JS函数。可以吗?

时间:2013-12-18 12:36:56

标签: javascript jquery html5 twitter-bootstrap

好的,所以使用任何搜索引擎查找this$(this)上的任何内容都非常困难。所以我希望我没有错过任何明显的东西。

基本上我正在尝试将点击的DOM对象解析为函数,然后通过该对象的兄弟节点递归操作并运行一些运算符。 (您可以在下面找到代码以及实时页面的链接)

到目前为止我发现的所有引用(包括this)都涉及在$(this)上调用内置函数,这样$(this).find('p')然而我正在尝试做的就是解析它作为我的函数的参数因此insertRow($(this))这可能吗?如果不是,我如何使用上述调用样式并访问我的函数中的对象?

这是我到目前为止的代码。我已经包含了addRow来展示我目前正在做的工作。正在进行的工作是insertRow(row)incrementRows(row)。我想我也可能搞砸了`$(document).ready()中的.click事件的分层。区域。我现在真的很茫然。

哦,它和现在的页面。 http://azarel-howard.me/stage-management/script-writer/

var currentScene = 1, currentRow = 0;
function addRow() {
    if (currentRow==0) {
        $("#scriptContent").append("<div class=\'row\' data-scene=\'" + currentScene + "\' data-row=\'" + currentRow + "\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox checked\' for=\'checkbox1\'><span class=\'icons\'><span class=\'first-icon fui-checkbox-unchecked\'></span><span class=\'second-icon fui-checkbox-checked\'></span></span><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><h6>Scene " + currentScene + "</h6></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add Scene Title...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
        currentRow++;
    } else {
        $("#scriptContent").append("<div class=\'row\' data-scene=\'" + currentScene + "\' data-row=\'" + currentRow + "\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox\' for=\'checkbox1\'><span class=\'icons\'><span class=\'first-icon fui-checkbox-unchecked\'></span><span class=\'second-icon fui-checkbox-checked\'></span></span><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><input type=\'text\' placeholder=\'Line Label\' class=\'form-control input-sm\'></input></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add script...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
        currentRow++;
    }
}
function insertRow(row) {
    incrementRows(row.next().find(".row"));
    $(row).after("<div class=\'row\'><div class=\'col-lg-2\' id=\'scene\'><div class=\'row\'><div class=\'col-lg-12\'><label class=\'checkbox\' for=\'checkbox1\'><input type=\'checkbox\' value=\'\' id=\'checkbox1\' data-toggle=\'checkbox\'>New Scene</label></div></div><div class=\'row\'><div class=\'col-lg-12\'><input type=\'text\' placeholder=\'Line Label\' class=\'form-control input-sm\'></input></div></div></div><div class=\'col-lg-10\' id=\'script;\'><textarea rows=\'3\' placeholder=\'Add script...\' class=\'form-control\'></textarea></div></div> <!-- row close -->");
}
function incrementRows(row) {
    var nextRow = $(row).next().find(".row");
    if (row.data("scene") == nextRow.data("scene")) {
        if ((row.data("row")+1) == nextRow.data("row")) {
            incrementRows(nextRow);
        }
    }
    row.data("row") += 1;
}
$(document).ready(function(){
    $("#addRowBtn").click(addRow);
    $("#insertRowBtn").click(function() {
        // solution applied
        //$(".row").click(insertRow(this));
        $(".row").click( function() {
            insertRow($(this))
        });
    });
    //$(".checkbox").click(function() {
    //  if ()
    //})

    addRow();
    addRow();
});

1 个答案:

答案 0 :(得分:1)

通常可以将其分配给变量。例如:

var dom_element = $(this);
dom_element.fadeOut();

或者

function do_fadeout(element){
    element.fadeOut();
}
$('#target_div_id').click(function(){
    var dom_element = $(this);
    do_fadeout(dom_element);
    // or just do_fadeout($(this));
})