Question

此页面的HTML如下：

<div class="list-block media-list">
    <ul>
        <form method="post" action="">
            <li >
                <div class="item-content">
                    <div class="item-media">
                        <img  width="80">
                    </div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">Element title</div>
                            <div class="item-after">Unexcused</div>
                        </div>
                        <div class="item-subtitle">Subtitle</div>
                        <div class="item-text">Additional description text</div>
                    </div>
                </div>

            </li>
            <input type="hidden" name="status" id="status" value="" />
            <input type="hidden" name="client_id" id="client_id" value="23" />
        </form>
        <form method="post" action="">
            <li class="red">
                <div class="item-content">
                    <div class="item-media">
                        <img width="80">
                    </div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <div class="item-title">Element title</div>
                            <div class="item-after">Excused</div>
                        </div>
                        <div class="item-subtitle">Subtitle</div>
                        <div class="item-text">Additional description text</div>
                    </div>
                </div>

            </li>
            <input type="hidden" name="status" id="status" value="" />
            <input type="hidden" name="client_id" id="client_id" value="27" />
        </form>
    </ul>
</div>

这是JS：

$(document).ready(function() {
    $('.media-list li').on('click', function () {
        var buttonValue = $(this).closest('#client_id').prop("value");
        alert(buttonValue);
    });
});

当我点击<li>时，它应该提醒它client_id值，但它总是23，如果我点击的话，这是正确的数字第一个<li>。还有其他方法可以解决这个问题吗？

Answer 1

在HTML中，id should be unique。在您的情况下，您可以获取父表单并在其中找到ID。也请遵循<ul><li>template</li></ul>

等标准模板

试试

$(this).parents('form:first').find('#client_id').val()

Answer 2

ID应该是唯一的，您可以在此处使用属性值选择器。还可以使用.val()来获取输入类型的值：

$(this).closest('form').find("[name=client_id]").val();

Answer 3

你永远不应该重复ids;导致HTML无效。请改用css类，或使用name选择hidden表单元素：

 $(this).closest('form').find('input[name=client_id]').val();

或者将您的HTML更改为：

        <input type="hidden" name="status" class="status" value="" />
        <input type="hidden" name="client_id" class="client_id" value="27" />

你的JS将是：

$(this).closest('form').find('.client_id').val();

Answer 4

jQuery不是这种基本代码的最佳选择。

但如果你绝对需要jQuery，你可以这样做：

$(this).parent().find('[name=client_id]').val();

但是，如果你不担心jQuery，如果你关心性能，你可以使用它：

(this.parentNode.getElementsByTagName('input')[1]||{value:undefined}).value;

如果订单发生变化，最新的工作将无效。

或者您可以尝试（未经测试且比jQuery解决方案更短）：

this.parentNode.elements.client_id.value;

Doc：http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml

在一个页面上有多个表单，获取输入值

4 个答案: