Question

首先发布在这里。

我有一个理论长度为n的父div列表。在这些父母中，“儿童”div分别包含选择下拉和编辑按钮。

单击编辑按钮后，我想将选择下拉菜单更改为标准文本输入字段。

我已经查看了一些示例，但一直无法找到最合适的解决方案。也许最好将编辑按钮放在与选择下拉相同的div中？

事件处理程序也出现问题。建议将非常感谢。感谢。

下面的HTML：

<html>
<body>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

<div class="test">

    <div class="choose">
        <select class = "tag"><option value='gain'>gain</option><option value='share'>share</option><option value='bring'>bring</option>
    </select>
    </div>

    <div class="edit-button">
        <a href="#" data-action="edit">edit</a>
    </div>

</div>

</body>
</html>

和jQuery：

<script type="text/javascript" src="jquery-1.6.4.js"></script>


<script type='text/javascript'>
$(document).ready(function() {
var multiTags = $("#multi");

        function handler(e) {
            // get the element which trigged the event
            var jqEl = $(e.currentTarget);

            // get parent div
            var tag = jqEl.parent();

            // check which action we should perform
            switch (jqEl.attr("data-action")) {

            case "edit":

                var tag = tag.parent();
                $(this).tag.html('<input type="text" id="something"/>');

                break;

            }

            return false;
        }

    multiTags.find("a").live("click", handler);
});



</script>

Answer 1

这个怎么样：

$(".edit-button").on("click", "a[data-action=edit]", function() {
    var testDiv = $(this).parent().parent();
    var selectValue = testDiv.find(".choose").find("select").val();
    var input = "<input name='' value='" + selectValue + "'/>";
    testDiv.find(".choose").html(input);
});

JSFiddle：http://jsfiddle.net/WxPPR/

如何使用jQuery使用相同的Parent修改DIV的内容

1 个答案: