部分點擊功能無法在第一次點擊上工作

我在表格中有一系列<td>元素，在我的上下文中，它們是用戶可以選擇的空間的「插槽」。每個插槽都有一個保存插槽ID（時間戳）的屬性（data-slot-stamp）。當用戶點擊一個插槽時，該時間戳將被添加到另一個元素的（.addButton）屬性data-selected-slots。如果用戶再次單擊插槽，該插槽將從.addButton的data-selected-slots屬性中刪除。下面的代碼片段正在工作，除了第一次點擊時，如果用戶從他們的選擇中刪除插槽。期望的行爲的部分點擊功能無法在第一次點擊上工作

實施例：

用戶點擊任何時隙
該時隙的數據時隙時間戳屬性的值被添加到.addButton的數據選擇的時隙屬性的值元素
如果用戶再次單擊同一個插槽，則應該從.addButton元素的data-selected-slots屬性的值中刪除該插槽的data-slot-stamp屬性的值。

發生了什麼事在我的情況：

用戶點擊任何時隙
該時隙的數據時隙時間戳屬性的值被添加到的數據選擇的時隙屬性的值.addButton元素
如果用戶再次單擊同一個插槽（但僅當它是從頁面刷新後單擊的第一個插槽）時，該插槽的data-slot-stamp屬性的值不會被刪除，但會保留在值的數據選擇時隙屬性。
在任何插槽的後續點擊中，功能按預期工作，但最初點擊插槽的數據不會被刪除。

HTML結構：

<table class="spacesTable"> 
      <tr> 
       <td class="slot used unselected" data-slot-stamp="123456789"> 
       Slot 1 
       </td> 
       <td class="slot used unselected" data-slot-stamp="987654321"> 
       Slot 2 
       </td> 
       <td class="slot used unselected" data-slot-stamp="654321987"> 
       Slot 3 
       </td> 
       <td> 
        <div class="addButton" data-selected-slots=""> 
        Add Button 
        </div> 
       </td> 
      </tr> 
    </table>

相關的jQuery：

$('.spacesTable').on('click', '.slot.used', function() { 
     var curAtts = $(this).siblings('.addButton').attr('data-selected-slots'); 
     var clickedStamp = $(this).attr('data-slot-stamp'); 

     if ($(this).hasClass('unselected')) { 
$(this).addClass('selected').removeClass('unselected'); 
      //Add to the values stored in the data-selected-slots attr of the button for this row 
      var spacer = ','; 
      if (!curAtts) { 
       curAtts = ''; 
       spacer = ''; 
      } 
      $(this).siblings('.addButton').attr('data-selected-slots', clickedStamp+spacer+curAtts); 

     } else if ($(this).hasClass('selected')) { 
$(this).removeClass('selected').addClass('unselected'); 
      //check to see if the slot timestamp is in the button's data-selected-slots attr, and if so, remove it 
      var findStamp = curAtts.indexOf(clickedStamp); 
      if (findStamp != -1) { 
       curAtts = curAtts.replace(clickedStamp+',',''); 
       $(this).siblings('.addButton').attr('data-selected-slots', curAtts); 
      } 

     } 
    });

來源

2016-12-13 Eckstein

請提供[MCVE。還需要更好地解釋你想要以更具體的方式實現什麼 – charlietfl

第一件事你爲什麼需要兩個選擇器'未選擇'和'選擇'？如果它沒有選擇的類，則表示它沒有被選中。如果'背景顏色'正在改變，這意味着你在其他代碼中缺少一些邏輯。 – xdeepakv

@charlietfl我已經更新了這些問題，希望能夠更加簡潔明瞭。謝謝。 – Eckstein

因爲「」

改變這一點：

curAtts = curAtts.replace(clickedStamp+',','');

喜歡的東西：

if (curAtts.indexof(",") > 0) { 
    curAtts = curAtts.replace(clickedStamp+',',''); 
}else{ 
    curAtts = curAtts.replace(clickedStamp,''); 
}

希望它有助於

來源

2016-12-13 04:29:25 Lombard

謝謝，這使我朝着正確的方向發展，這是爲了讓字符串末尾的逗號逗號，並在獲得價值時稍後剝離它。 – Eckstein

部分點擊功能無法在第一次點擊上工作

回答

相關問題