如何使用 jquery 选择输入？

Question

我想获取输入的值，我想用 jquery 来做。

我只想使用 name="picture" 获取隐藏输入的值当我点击具有 onclick="deleteDefaultSection($(this)) 的 حذف این بخش 按钮。 我已经使用.parent() 函数超出了该范围。但是当我和class="ribbon-wrapper card" 一起进入div 时。我无法进入带有class="col-md-12" 的div 并选择其中带有class="picture" 的隐藏输入值。

<div class="ribbon-wrapper card">
  <div class="card-header">
    <div class="ribbon ribbon-default pull-right">
      <input type="text" style="height: 24px;
      border-radius: 3px;
      border: none;
      padding: 5px;
      font-size: 12px;
      width: 130px;
      text-align: center;
      font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" />
    </div>
  </div>
  <div class="card-body">
    <div style="float: right;
    top: 15px;
    right: 20px;">
      <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه
                                                    کردن عکس
                                                </button>
      <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش
                                                </button>
    </div>
  </div>
  <!-- This row is for showing the uploaded image and its description -->
  <div class="row">
    <div class="col-md-12" style="text-align: center;">
      <input type="hidden" class="picture" name="picture" value="<%= analysis.images[i] %>">
      <input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>">
      <input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>">
      <div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>">
        <img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px">
        <div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p ">
          <%= analysis.imagesDesc[i] %>
        </div>
        <div class="boxBotton row my-5">
          <div class="col-lg-7 mr-4">
            <button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button>
          </div>
          <div class="col-lg-4">
            <button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以这样做：

function deleteDefaultSection(obj) {
  var pic = obj.closest(".card").find('[name="picture"]');
  console.log(pic.val());
}

.closest(".card") 在 html 中向上移动并选择它找到的类 card 的第一个元素。

然后您可以使用.find() 并将其与[name="picture"] 结合以获取具有name 属性且值为picture 的元素

演示

function deleteDefaultSection(obj) {
  var pic = obj.closest(".card").find('[name="picture"]');
  console.log(pic.val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ribbon-wrapper card">
  <div class="card-header">
    <div class="ribbon ribbon-default pull-right">
      <input type="text" style="height: 24px;
                                                border-radius: 3px;
                                                border: none;
                                                padding: 5px;
                                                font-size: 12px;
                                                width: 130px;
                                                text-align: center;
                                                font-weight: normal;" name="name" class="nameSection" placeholder="بازه زمانی را وارد کنید" value="<%= analysis.timeFrames[i] %>" />
    </div>
  </div>
  <div class="card-body">
    <div style="float: right;
                                                top: 15px;
                                                right: 20px;">
      <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#AddSection" data-type="">اضافه
                                                    کردن عکس
                                                </button>
      <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteDefaultSection($(this))">حذف این بخش
                                                </button>
    </div>
  </div>
  <!-- This row is for showing the uploaded image and its description -->
  <div class="row">
    <div class="col-md-12" style="text-align: center;">
      <input type="hidden" class="picture" name="picture" value="Hiddenvalue">
      <input type="hidden" class="details" name="details" value="<%= analysis.imagesDesc[i] %>">
      <input type="hidden" class="sectionname" name="timeFrames" value="<%= analysis.timeFrames[i] %>">
      <div class="boxUploadImage Active" data-typeSection="<%= i %>" data-name="<%= i + 64 %>">
        <img onclick="viewPicture($(this))" src="<%= analysis.images[i] %>" width="80%" height="200px">
        <div data-toggle="modal" data-target="#viewDiscription" onclick="viewDetails($(this))" class="p ">
          <%= analysis.imagesDesc[i] %>
        </div>
        <div class="boxBotton row my-5">
          <div class="col-lg-7 mr-4">
            <button class="btn btn-block btn-sm btn-twitter" data-toggle="modal" data-target="#EditSection" onclick="editSection($(this), event)">ویرایش</button>
          </div>
          <div class="col-lg-4">
            <button class="btn btn-block btn-sm btn-danger deleteSection" onclick="deleteSection($(this))">حذف</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>