javascript - 如何获取属性类型及其值

Question

这是我的代码

  foreach ($data as $key => $value) {
        ?>
        <div class="col-md-4">


                <div style="border: 1px solid #ddd">
                    <img width="200px" height="200px" src="<?= $value["image"]; ?>">
                    <h4 class="text-info"><?= $value["name"]; ?></h4>
                    <h4 class="text-info"><?= $value["price"]; ?></h4>
                    <input type="number" class="form-control" value="1" name="quantity">
                    <input type="hidden" name="name" value="<?= $value["name"]; ?>">
                    <input type="hidden" name="price" value="<?= $value["price"]; ?>">
                    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
                </div>

        </div>
        <?php

单击按钮后如何获取属性 type=hidden 和 name=price

Answer 1

此 jQuery 示例处理添加按钮的 click 事件，并找到同级 price。它将此值写入控制台。

请检查，

siblings() - DOM遍历功能

CSS Attribute Selectors

$("input.btn[name='add']").click(function(e) { //the click of the add button
  console.log($(this).siblings("input[type='hidden'][name='price']").val()); //write the val of the hidden field
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">


  <div style="border: 1px solid #ddd">
    <img width="10" height="10" src="">
    <h4 class="text-info"></h4>
    <h4 class="text-info"></h4>
    <input type="number" class="form-control" value="1" name="quantity">
    <input type="hidden" name="name" value="one">
    <input type="hidden" name="price" value="$1">
    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
  </div>

</div>
<div class="col-md-4">


  <div style="border: 1px solid #ddd">
    <img width="10" height="10" src="">
    <h4 class="text-info"></h4>
    <h4 class="text-info"></h4>
    <input type="number" class="form-control" value="2" name="quantity">
    <input type="hidden" name="name" value="two">
    <input type="hidden" name="price" value="$2">
    <input type="button" class="btn btn-success" name="add" value="Sepete Ekle" id="add">
  </div>

</div>