當我單擊 jquery 中的 i 標記時，如何定位最近的輸入[類型]

Question

我正在處理這個更新表格。 這個想法是，最初， inputs在單擊它們附近的圖標之前是不可編輯的。 由於他們中的大多數人都有相同的課程，我認為我應該主要在表格的課程部分工作，但我仍然真的被困在這里。

然而，到目前為止還沒有運氣。 我希望有人能告訴我這個的解決方法。

HTML

<form method="post" action="../php/">
        <div class="parent">
          <div class="kid1">
            <label>Name</label>
          </div>
          <div class="kid2">
            <input class="input_inner no_border" type="text" name="name" placeholder="Name" value ="<?php  echo $name ?>" required readonly>
            <i class="fa fa-pencil"></i>
          </div>
        </div>
        <div class="parent">
          <div class="kid1">
            <label>Civ Status</label>
          </div>
          <div class="kid2">
            <select name="civil_status" id="cv_stat" class="no_border" required readonly>
              <option value="<?php echo $cv ?>"><?php echo $cv ?></option>
              <option value="Single">Single</option>
              <option value="Married">Married</option>
              <option value="Widowed">Widowed</option>
              <option value="Separated">Anulled</option>
            </select>
            <i class="fa fa-pencil"></i>
          </div>
        </div>
        <div class="parent">
          <div class="kid1">
            <label>Email</label>
          </div>
          <div class="kid2">
            <input type="email" name="email" class="no_border" placeholder="Email" value="<?php echo $email ?>"required readonly>
            <i class="fa fa-pencil"></i>
          </div>
        </div>
        <div class="parent">
          <div class="kid1">
            <label>Address</label>
          </div>
          <div class="kid2">
            <input type="text" name="address" class="no_border" placeholder="Address" value="<?php echo $address ?>"required readonly>
            <i class="fa fa-pencil"></i>
          </div>
        </div>
        <div class="parent">
          <div class="kid1">
            <label>Contact</label>
          </div>
          <div class="kid2">
            <input type="number" name="contact" class="no_border" placeholder="Contact" value="<?php echo $contact ?>"required readonly>
            <i class="fa fa-pencil"></i>
          </div>
        </div>
        <div class="parent">
        <div class="kid1">
          <label>Gender</label>
        </div>
        <div class="kid1">
          <select name="gender" class="no_border" id="gender" required readonly>
            <option value="<?php echo $gnder ?>"><?php echo $gnder ?></option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Gay">Gay</option>
            <option value="Lesbian">Lesbian</option>
            <option value="Trans">Trans</option>
            <option value="Pan">Pan</option>
          </select>
          <i class="fa fa-pencil"></i>
        </div>
        </div>
        <h4>Dependents</h4>
        <div>
          <input type="text" name="d1" placeholder="Dependent 1" class="no_border" value="<?php echo $d1 ?>" readonly>
          <i class="fa fa-pencil"></i>
        </div>
        <div>
          <input type="text" name="d2" placeholder="Dependent 2" class="no_border" value="<?php echo $d2 ?>" readonly>
          <i class="fa fa-pencil"></i>
        </div>
        <div>
          <input type="text" name="d3" placeholder="Dependent 3" class="no_border" value="<?php echo $d3 ?>" readonly>
          <i class="fa fa-pencil"></i>
        </div>
        <div>
          <input type="text" name="d4" placeholder="Dependent 4" class="no_border" value="<?php echo $d4 ?>" readonly>
          <i class="fa fa-pencil"></i>
        </div>

        <input type="submit" name="submit">
  </form>

        

Jquery - Here I thought that the closest() object could fix however it might be a case that I am misinterpreting the real function of the object. 我真的希望有人可以幫助我解決這個問題。 謝謝

$(".fa-pencil").click(function(){
    $(".fa-pencil").not($(this)).closest("input").attr("readonly", true);
    const elem = $(this).closest(".input_inner");
    alert(elem.val())
    elem.css("background", "red");
    if(elem.attr("readonly", true)) elem.attr("readonly", false);
    else elem.attr("readonly", false);
});

先感謝您

Answer 1

closest()僅搜索父元素。 您嘗試查找的input或select是以前的同級。

解決這個問題的最簡單、最可靠和最可擴展的方法是使用closest()來查找引發事件的i和目標表單控件的共同父級，然后find()直接獲取input 。 但是，由於您的 HTML 結構在表單中更改得較低，因此可以在此處使用prev()或siblings()方法。

請注意，我稍微擴展了邏輯，以便“編輯” i元素可以用作切換，以便在編輯完成時將控件返回到只讀 state。

此外，您應該注意，最佳實踐是在可能的情況下使用prop()而不是attr() ，並且還使用 CSS 類而不是內聯樣式。

話雖如此，試試這個：

 $(".fa-pencil").click(function() { $(".fa-pencil").not(this).prev('input').prop("readonly", true).removeClass('active'); $(this).prev('input, select').toggleClass('active').prop('readonly', (i, r) =>;r); });

 .active { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" action="../php/"> <div class="parent"> <div class="kid1"> <label>Name</label> </div> <div class="kid2"> <input class="input_inner no_border" type="text" name="name" placeholder="Name" value="<?php echo $name?>" required readonly> <i class="fa fa-pencil">Edit</i> </div> </div> <div class="parent"> <div class="kid1"> <label>Civ Status</label> </div> <div class="kid2"> <select name="civil_status" id="cv_stat" class="no_border" required readonly> <option value="<?php echo $cv?>"> <?php echo $cv?> </option> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> <option value="Separated">Anulled</option> </select> <i class="fa fa-pencil">Edit</i> </div> </div> <div class="parent"> <div class="kid1"> <label>Email</label> </div> <div class="kid2"> <input type="email" name="email" class="no_border" placeholder="Email" value="<?php echo $email?>" required readonly> <i class="fa fa-pencil">Edit</i> </div> </div> <div class="parent"> <div class="kid1"> <label>Address</label> </div> <div class="kid2"> <input type="text" name="address" class="no_border" placeholder="Address" value="<?php echo $address?>" required readonly> <i class="fa fa-pencil">Edit</i> </div> </div> <div class="parent"> <div class="kid1"> <label>Contact</label> </div> <div class="kid2"> <input type="number" name="contact" class="no_border" placeholder="Contact" value="<?php echo $contact?>" required readonly> <i class="fa fa-pencil">Edit</i> </div> </div> <div class="parent"> <div class="kid1"> <label>Gender</label> </div> <div class="kid1"> <select name="gender" class="no_border" id="gender" required readonly> <option value="<?php echo $gnder?>"> <?php echo $gnder?> </option> <option value="Male">Male</option> <option value="Female">Female</option> <option value="Gay">Gay</option> <option value="Lesbian">Lesbian</option> <option value="Trans">Trans</option> <option value="Pan">Pan</option> </select> <i class="fa fa-pencil">Edit</i> </div> </div> <h4>Dependents</h4> <div> <input type="text" name="d1" placeholder="Dependent 1" class="no_border" value="<?php echo $d1?>" readonly> <i class="fa fa-pencil">Edit</i> </div> <div> <input type="text" name="d2" placeholder="Dependent 2" class="no_border" value="<?php echo $d2?>" readonly> <i class="fa fa-pencil">Edit</i> </div> <div> <input type="text" name="d3" placeholder="Dependent 3" class="no_border" value="<?php echo $d3?>" readonly> <i class="fa fa-pencil">Edit</i> </div> <div> <input type="text" name="d4" placeholder="Dependent 4" class="no_border" value="<?php echo $d4?>" readonly> <i class="fa fa-pencil">Edit</i> </div> <input type="submit" name="submit"> </form>