从列表中的隐藏输入中获取正确的值

时间：2017-10-13 05:50:12

标签： javascript jquery html

我有一些父母及其子女的名单。我的目标是，当我点击任何列表时，它将获取其隐藏的输入值，但问题是它只抓取所有项目的单个值。我使用隐藏的输入ID来选择项目。我在做什么错了？我也使用了一个类来输入，但仍然不起作用。有什么想法吗？

     $(document).ready(function () {

        $(".p").click(function () {
            var z = $("#pid").val();
            alert(z);
        })

        $(".c").click(function () {
            var z = $("#cid").val();
            alert(z);
        })

    });
<!DOCTYPE html>
    <html>
    <head>
        <title>Just test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>

    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>


    </head>
    <body>

<div class="List">
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="1">
                    <b>Parents text 1</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0001">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0002">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="2">
                    <b>Parents text 2</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0003">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0004">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
</div>

    </body>
    </html>

3 个答案:

答案 0 :(得分：1)

你必须在.p类中找到id，同时id应该是唯一的，你可以改用class：

$(document).ready(function () {

        $(".p").click(function () {
            var z = $(this).find("#pid").val();
            alert(z);
        })

        $(".c").click(function () {
            var z = $(this).find("#cid").val();
            alert(z);
        })

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
        <title>Just test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>

    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>


    </head>
    <body>

<div class="List">
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="1">
                    <b>Parents text 1</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0001">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0002">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="2">
                    <b>Parents text 2</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0003">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0004">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
</div>


    <script>

       
    </script>

    </body>
    </html>

答案 1 :(得分：0)

由于您对所有字段使用相同的ID，因此无论何时触发click事件，都会提示第一个地址为id的值。您必须在.p或.c类中找到ID，并且可以使用$(this).find()

来实现

this关键字引用元素的当前实例

＆＃13;
＆＃13; 
     $(document).ready(function () {

        $(".p").click(function () {
            var z = $(this).find("#pid").val();
            alert(z);
        })

        $(".c").click(function () {
            var z = $(this).find("#cid").val();
            alert(z);
        })

    });
＆＃13; 
<!DOCTYPE html>
    <html>
    <head>
        <title>Just test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>

    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>


    </head>
    <body>

<div class="List">
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="1">
                    <b>Parents text 1</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0001">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0002">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
    <div class="parents">
        <h4 class="p">
            <a href="#">
                <u>
                 <input type="hidden" name="pid" id="pid" value="2">
                    <b>Parents text 2</b>
                </u>
            </a>
        </h4>
        <div class="child">
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0003">
                        <b>Child text 1</b>
                    </u>
                </a>
            </h6>
            <h6 class="c">
                <a href="#">
                    <u>
                     <input type="hidden" name="cid" id="cid" value="0004">
                        <b>Child text 2</b>
                    </u>
                </a>
            </h6>
        </div>
    </div>
</div>

    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你也可以通过它的价值得到它

＆＃13;
＆＃13; 
$('select').change(function() {
  a = $('select > option:selected').text();
  $('ul>li').css('visibility', 'hidden')
  $("ul > li[value='" + a + "']").css('visibility', 'visible');
});
＆＃13; 
.Hidden {
  visibility: hidden;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='Hidden' value='grab1'>grab1</li>
  <li class='Hidden' value='grab2'>grab2</li>
  <li class='Hidden' value='grab3'>grab3</li>
  <li class='Hidden' value='grab4'>grab4</li>
  <li class='Hidden' value='grab5'>grab5</li>
  <li class='Hidden' value='grab6'>grab6</li>
</ul>
<select>

<option>grab1</option>
<option>grab2</option>
<option>grab3</option>
<option>grab4</option>
<option>grab5</option>
<option>grab6</option>
</select>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题