亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

為什么即使使用獨特的類，一個按鈕也會覆蓋我的另一個按鈕？

為什么即使使用獨特的類，一個按鈕也會覆蓋我的另一個按鈕？

守候你守候我 2023-02-24 10:39:20
我是 javascript/jquery 的新手，并且已經在這個問題上停留了一段時間。所以我有兩個按鈕，一個清除按鈕將清除表格一行中的所有表單，一個重置按鈕保存表格每一行的所有初始值。問題：所以目前當我運行腳本時，重置按鈕將繼續覆蓋清除按鈕。這意味著當我點擊清除時它也將作為重置而不是清除行。我嘗試創建要調用的獨特類（.clear_button、.reset_button），如您在此處所見。我發現很難對 javascript 進行故障排除，尤其是剛接觸它時，為什么會這樣？<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){  $(".clear_button").click(function(){    function my_clearFunction(i) {        document.getElementById("id_form-" + (i - 1) + "-Name").value = " ";        document.getElementById("id_form-" + (i - 1) + "-Start").value = "";        document.getElementById("id_form-" + (i - 1) + "-End").value = "";        document.getElementById("id_form-" + (i - 1) + "-Advanced").value = " ";    }  });  $(".reset_button").ready(function(){    $('#reset :input:not([type="button"])').each(function(idx, ele) {      ele.dataset.initvalue = ele.value;    });    $('#reset [type="button"]').on('click', function(e) {      // reset current row............      $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {          // restore the initial value          ele.value = ele.dataset.initvalue;      })    });  });});</script>注意：我理解的代碼不統一，比如我的clear button邏輯就不是jquery寫的。抱歉，我無法附加 jsfiddle，這個項目相對較大，我使用 django 導入我的表單，因此很難設置。因此，任何輸入都將不勝感激，因為我已經堅持了很長一段時間并且似乎無法理解。還值得一提的是我的按鈕輸入標簽，所以它們就在這里。<input type="button"  class="clear_button" onclick="my_clearFunction({{ forloop.counter }})" value="  x  ">                    <input  type="button" class="reset_button" value="  x  ">
查看完整描述

2 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

當我點擊清除時，它也將作為重置而不是清除行。


您的重置偵聽器聲明為


$('#reset [type="button"]').on('click', function(e) {

  ...

})

該#reset元素似乎同時包含清除按鈕和重置按鈕，因此單擊其中任何一個都將恢復初始值。


清除按鈕也有自己的兩個處理程序。在代碼中聲明了一個，它又聲明了一個函數（不在處理程序本身中調用）和一個試圖調用所述函數的內聯處理程序。那不應該起作用，因為它在全局范圍內是不可見的。


代替


$(button).on('click',(e)=>{

  function doSomethingWith(i) {

   ...

  }

  doSomethingWith(e.target.id);

})

如果應該


function doSomethingWith(i) {

   ...

}


$(document).ready(function(){

   $(button).on('click',(e)=>{

     doSomethingWith(e.target.id);

   });

});

那么它將對處理程序可見，而且在全局范圍內也是可見的，因此您可以使用內聯“onclick”調用它


 <button onclick="doSomethingWith({{ forloop.counter }})" >

但是，如果您還在 JS 中聲明了一個內聯處理程序，那么您不應該有一個內聯處理程序。由于您正在處理代碼中的重置按鈕，因此對于清除按鈕也堅持這種方法。


現在，您用來清除行的方法需要您知道行的相對索引，以及每行的輸入，您可以為它們計算各自的 ID。然而，在重置原始值時，您不需要知道任何事情：


$('.reset_button').on('click', function(e) {

  // reset current row............

  $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {

      // restore the initial value

      ele.value = ele.dataset.initvalue;

  })

});

該按鈕只需要知道它與<tr>需要恢復其值的其他輸入位于同一元素內。它不關心索引、ID，甚至不關心輸入是什么，只要它們不是按鈕即可。


你應該做同樣的事情來清除這些值：


$('.clear_button').on('click', function(e) {

  // reset current row............

  $(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {

      ele.value =  "";

  });

});

當談到存儲原始值時，我也習慣求助于 jQuery.data。無論如何，對于這個用例，你可以完全堅持


input.dataset.initialValue = input.value

代替


$(input).data('initialValue',input.value)

只要您牢記這些方法是不可互換的。您不能使用 dataset 設置 initialValue 然后使用 jQuery.data 或其他方式獲取它。

function randomTime() {

  return [

    Number(100 * Math.random() % 12).toFixed(0).padStart(2, '0'),

    Number(100 * Math.random() % 60).toFixed(0).padStart(2, '0')

  ].join(':');

}


function addFormRow(player_name = 'N/A') {

  let tr = $('<tr class="form_row">'),

    name = $('<input type="text" name="name" class="name">'),

    start = $('<input type="time" name="start" class="start">'),

    end = $('<input type="time" name="end" class="end">'),

    advanced = $('<input type="number" name="advanced" class="advanced">'),

    clear = $('<button class="clear_button">Clear</button>'),

    reset = $('<button class="reset_button">Reset</button>');


  name.val(player_name);

  start.val(randomTime());

  advanced.val(parseInt(Math.random() * 100, 10))

  end.val(randomTime());


  for (let input of [name, start, end, advanced, clear, reset]) {

    $('<td>').append(input).appendTo(tr);

   }


  tr.appendTo('#forms tbody');


}

addFormRow('player one');

addFormRow('player two');

addFormRow('player three');


$(document).ready(function() {

  $('#forms tbody tr').each((index,tr)=>{

    $(tr).find('input').each((idx,input)=>{

       $(input).data('initialValue',$(input).val());

    });

  })

  $(".clear_button").on('click', (e) => {

    let $this = $(e.target),

      tr = $this.closest('tr');

    tr.find('input').each((index, input) => {

      input.value = '';

    });

  });

  $(".reset_button").on('click', (e) => {

    let $this = $(e.target),

      tr = $this.closest('tr');

    tr.find('input').each((index, input) => {

      $(input).val($(input).data('initialValue'));

    });

  });


});

.advanced {

  width: 4em;

}


.name {

  width: 9em;

}


.start,

.end {

  width: 5.5em;

}


.form_row input {

  height: 1.1em;

}

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

<table id="forms">

  <thead>

    <tr>

      <th>name</th>

      <th>start</th>

      <th>end</th>

      <th>advance</th>

      <th colspan="2">actions</th>


    </tr>

  </thead>

  <tbody>

  </tbody>

</table>


查看完整回答
反對 回復 2023-02-24
?
LEATH

TA貢獻1936條經驗 獲得超7個贊

你的$(".clear_button").click()處理程序沒有做任何事情。它定義了一個本地函數，但從不調用它。


與其嘗試從 調用函數onclick()，不如data向保存索引的按鈕添加一個屬性。然后單擊處理程序可以獲取此屬性并使用它來查找需要清除的所有相關元素。


$(".clear_button").click(function() {

  var i = $(this).data("rel-id");

  document.getElementById("id_form-" + (i - 1) + "-Name").value = " ";

  document.getElementById("id_form-" + (i - 1) + "-Start").value = "";

  document.getElementById("id_form-" + (i - 1) + "-End").value = "";

  document.getElementById("id_form-" + (i - 1) + "-Advanced").value = " ";

});

<input type="button"  class="clear_button" data-rel-id="{{ forloop.counter }}" value="  x  ">

展開片段


查看完整回答
反對 回復 2023-02-24
  • 2 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號