javascript - 如何获取选择器使用 find() 函数获得的 radio 输入值

Question

我尝试从子元素中获取每个子元素(项目)具有相同名称的输入字段的值。为此，我使用了each() 函数。从 radio 输入检索值时遇到问题，我从不应该的 radio 输入中获取值。代码在这里

<div class="accordion" id="menu-ui-sortable" role="tablist" aria-multiselectable="true">
    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-1" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-1" aria-expanded="false" aria-controls="menu-item-settings-1">
            <h4 class="panel-title">Menu Item 1</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Halaman Web</i>
        </a>

        <input type="hidden" name="menu_item_type" value="page"/>
        <input type="hidden" name="menu_item_page_id" value="12"/>
        <input type="hidden" name="menu_item_content_id" value=""/>
        <input type="hidden" name="menu_item_url" value="www.example.com/page-12"/>

        <div id="menu-item-settings-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-1">
            <div class="panel-body">
                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 1"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 1"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1" checked=""> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-glass"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <p class="link-to-original">Asli: <a class="a-link" href="http://wordpress.dev/new-page-page/">new page page</a></p>
                    <a class="item-delete danger-highlight" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-2" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-2" aria-expanded="false" aria-controls="menu-item-settings-2">
            <h4 class="panel-title">Menu Item 2</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Homepage Content</i>
        </a>

        <input type="hidden" name="menu_item_type" value="homepage-content"/>
        <input type="hidden" name="menu_item_page_id" value=""/>
        <input type="hidden" name="menu_item_content_id" value="4"/>
        <input type="hidden" name="menu_item_url" value="#content-4"/>

        <div id="menu-item-settings-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-2">
            <div class="panel-body">
                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 2"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 2"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-search"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left"> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right" checked=""> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <a class="item-delete danger-highlight" id="delete-2" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" id="cancel-2" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-3" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-3" aria-expanded="false" aria-controls="menu-item-settings-3">
            <h4 class="panel-title">Menu Item 3</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Tautan Tertentu</i>
        </a>

        <input type="hidden" name="menu_item_type" value="custom-link"/>
        <input type="hidden" name="menu_item_page_id" value=""/>
        <input type="hidden" name="menu_item_content_id" value=""/>

        <div id="menu-item-settings-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-3">
            <div class="panel-body">
                <label>URL</label>
                <input type="text" class="form-control" name="menu_item_url" value="www.example.com"/>

                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 3"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 3"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-files"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <a class="item-delete danger-highlight" id="delete-3" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" id="cancel-3" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

<br/>

<button id="menu-nav-action" type="submit" class="btn btn-success btn-sm">Save</button>

js

$(document).ready(function () {

    $("#menu-ui-sortable").collapse().sortable({
        placeholder: "ui-sortable-placeholder",
        start: function(evt, ui ){
            ui.placeholder.height(ui.helper.outerHeight());
        },
        helper: function(evt, ui){
            var $clone =  $(ui).clone();
            $clone .css('position','absolute');
            return $clone.get(0);
        }
    });

    $(document).on('click', '#menu-nav-action', function (evt) {
        var menuNav = [];
        var ctn = 0;

        $("#menu-ui-sortable > div.panel.menu-item").each(function () {

            var menu_item_target = $(this).find('input[name="menu_item_target"]');
            var menu_item_target_ = menu_item_target.is(':checked') ? menu_item_target.val() : '0';

            var menu_item_classes_position = $(this).find('input[name="menu_item_classes_position"]');
            var menu_item_classes_position_ = '';

            for (var i = 0, length = menu_item_classes_position.length; i < length; i++) {
                if (menu_item_classes_position[i].checked) {
                    menu_item_classes_position_ = menu_item_classes_position[i].value;
                    console.log(menu_item_classes_position_);
                    break;
                }
            }

            /* Using each() function not work too */
            /*$(menu_item_classes_position).each(function () {
                if ($(this).is(':checked')) {
                    menu_item_classes_position_ = $(this).val();
                    console.log(menu_item_classes_position_);
                }
            });*/

            menuNav.push({
                nav_label: $(this).find('input[name="menu_item_title"]').val(),
                nav_title_attr: $(this).find('input[name="menu_item_attr_title"]').val(),
                nav_open_new_tab: menu_item_target_,
                nav_css_classes: $(this).find('input[name="menu_item_classes"]').val(),
                nav_css_classes_position: menu_item_classes_position_,
                nav_type: $(this).find('input[name="menu_item_type"]').val(),
                nav_link: $(this).find('input[name="menu_item_url"]').val(),
                nav_order: ctn});
            ctn++;
        });
        console.log(menuNav);
        alert(JSON.stringify(menuNav));
    });

});

这里是输出:

[
    {
        "nav_label":"label 1",
        "nav_title_attr":"attr 1",
        "nav_open_new_tab":"1",
        "nav_css_classes":"fa fa-glass",
        "nav_css_classes_position":"", // **this should be "left"**
        "nav_type":"page",
        "nav_link":"www.example.com/page-12",
        "nav_order":0
    },
    {
        "nav_label":"label 2",
        "nav_title_attr":"attr 2",
        "nav_open_new_tab":"0",
        "nav_css_classes":"fa fa-search",
        "nav_css_classes_position":"", // **this should be "right"**
        "nav_type":"homepage-content",
        "nav_link":"#content-4",
        "nav_order":1
    },
    {
        "nav_label":"label 3",
        "nav_title_attr":"attr 3",
        "nav_open_new_tab":"0",
        "nav_css_classes":"fa fa-files",
        "nav_css_classes_position":"left",
        "nav_type":"custom-link",
        "nav_link":"www.example.com",
        "nav_order":2
    }
]

根据 HTML，每个项目中 nav_css_classes_position 的正确值为“左”、“右”和“左”。

这里是演示:jsfiddle

Answer 1

您对每个组使用相同的 radio 名称[name="menu_item_classes_position"]。为每个组使用不同的名称。

在您的示例中，有 3 个菜单项包含包裹在 Accordion 中的单选按钮。但这些单选按钮作为一个整体起作用。也就是说，当您选择第二个菜单项的单选按钮时，它将取消选择第一个菜单项的单选按钮。