0

初投稿はこちら。

理論上の長さ 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>
4

1 に答える 1

0

これはどうですか：

$(".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/

于 2013-11-03T06:52:13.900 に答える