如何隱藏和顯示 jquery 中的 data-id 屬性 onclick 按鈕

Question

當我用下面的代碼點擊一個按鈕時，它對一個按鈕工作正常。

使用 css(id) 我可以為一行做，但是如果我使用循環並且我想根據按鈕或該特定按鈕的 data-id 屬性顯示數據，我不知道如何使用data-id 屬性或任何其他方法。

對於帶有 css(id) 的一個按鈕，我可以很容易地做到這一點，但是我使用帶有按鈕的 foreach 的方法（viewFullDetails 函數）它正在工作但是對於第一行，即使我點擊第二個按鈕，第一個按鈕隱藏/顯示不是第二個按鈕。 那么我應該怎么做才能顯示和隱藏與該行相關的按鈕的行數據？

 function viewFullDetails() { var x = document.getElementById("showme"); if (x.style.display === "none") { x.style.display = "block"; document.getElementById("showMoreLess").innerHTML = "View Less"; } else { x.style.display = "none"; document.getElementById("showMoreLess").innerHTML = "View More"; } }

 <button id="showMoreLess" data-order-id="${detailInfo.id}" class="viewDetailOrderButton" onclick="viewFullDetails()">View More</button>

在這里我不能使用 Css(id) 來定位那個按鈕

 async function renderViewDetails(data, dataTableOrders) {
    let ordersDetails = data.group_id;
    var detailInfos = dataTableOrders;

let html = 
        `<div class="viewDetailModal">
         <div class="detailButtonModal">
         <p class="viewOrderId">ID:</p>
         <p class="orderdetailsid viewOrderId">${data.id}</p>
         <p class="coinviewDetail">${data.coin}</p>
         </div>

         <div class="detailButtonModal">
         <p class="orderPnl">PNL</p>
         <p class="ordersPnlDetails"> &nbsp; ${data.group_pnl} </p>
         </div>

         <div class="rb-container">
         <ul class="rb">`;
               

    detailInfos.forEach(detailInfo => {
        if(detailInfo.group_id == ordersDetails) {
        let htmlSegment = `
          <li class="rb-item timelimeVertical" ng-repeat="itembx">
            <div class="tradingOrdersInfo">
            <p class="orderDetailDate">${detailInfo.openedAt}</p>
    
            <div class="tradeOrderType">
            <p class="viewDetailOrderType">${detailInfo.type}</p>
            <button id="showMoreLess_${detailInfo.id}" 
             data-order-id="${detailInfo.id}" 
             class="viewDetailOrderButton">View 
             More</button>
            </div>
    
                            
            <div id="showme_${detailInfo.id}" style="display:none";>
    
            <div class="tradeOrderEntry">
            <div>
            <p class="orderDetailQuantity">Quantity:</p>
            <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
           </div>
           <div class="tradeOrdervaluePrice">
           <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
           <p class="pnlInnerLabel">PNL</p>
           </div>
           </div>
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue">$${detailInfo.entry}</p>
           <p class="detailEntryValue entryOpa">Entry Price</p>
           </div>
    
           <div class="tradeOrdervaluePrice">
           <p class="detailCloseValue">$1690</p>
           <p class="viewCloseLabel">Close Price</p>
           </div>
           </div>
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue entryOpa ">TP Target</p>
           <p class="detailEntryValue entryOpa">Entry Target</p>
           </div>
    
           <div>
           <p class="detailEntryValueR viewPadd">1% <span class="viewHit">Hit</span> | 5% <span class="viewHit">Hit</span> | 10%</p>
           <p class="detailEntryValueR"> 40% | 20% | 30% </p>
           </div>
           </div>
    
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue entryOpa">Expire</p>
           </div>
    
           <div>
           <p class="detailEntryValueR viewPadd">Date - Time</p>
           </div>
                            </div>
    
    
          <div class="tradeOrderEntry tradeOrderEntryValue">
          <div>
          <p class="detailEntryValue entryOpa">Comment</p>
          </div>
    
         <div>
         <p class="detailEntryValueR viewPadd">Stop: 0.0009111</p>
         <p class="detailEntryValueR viewPadd">Minute: 0.000021</p>
         <p class="detailEntryValueR viewPadd">Current: 0.0002121</p>
         <p class="detailEntryValueR viewPadd">Profit: 0.97</p>
            </div>
         </div>
    
         <div class="tradeOrderEntryValue buttonsInfo">
         <button class="editedButton commonBtnStyle">
         <img src="img/edit-dropdown.png" />Edit</button>
                                
           <button class="cancelledButton commonBtnStyle">
           <img src="img/cross1.png" />Cancel</button>
                                
           <button class="resumedButton commonBtnStyle">
           <img src="img/pause-dropdown.png" />Pause/Resume</button>
                                
           <button class="exittedButton commonBtnStyle">
           <img src="img/exitted.png" />Force Exit</button>
           
           </div>
                            
          </div>
    
          </div>
          </li>`
                                          
        html += htmlSegment;
        }
        });
        html +=  `</ul></div></div>`;
       

     

    let container = document.querySelector('.orders-details-info');
    container.innerHTML = html;

    $(document).ready(function() {
        $('.viewDetailOrderButton').on('click', function(){
            var testId = $(this).attr('id');
           
            
        // $('.tradeOrderType').find("[data-id='" + testId + "']");
            viewFullDetails(testId);
        });
      });
    
      
      function viewFullDetails(testId){
        var x = document.getElementById("showme");
        console.log(128, x);
        if (x.style.display === "none") {
            x.style.display = "block";
            document.getElementById(testId).innerHTML="View Less";
        } else {
            x.style.display = "none";
            document.getElementById(testId).innerHTML="View More";
        }                     
      }
}

Answer 1

這是制作更多按鈕的方法

const orderUL = document.querySelector('.orders-details-info');
const groupDetail = detailInfos
  .filter(detailInfo => detailInfo.group_id == ordersDetails)
if (groupDetail.length) orderUL.innerHTML = groupDetail
  .map(detailInfo => `<li class="rb-item timelimeVertical" ng-repeat="itembx">
      <div class="tradingOrdersInfo">
        <p class="orderDetailDate">${detailInfo.openedAt}</p>
        <div class="tradeOrderType">
          <p class="viewDetailOrderType">${detailInfo.type}</p>
          <button type="button" data-order-id="${detailInfo.id}" 
          class="viewDetailOrderButton">View More</button>
        </div>
      </li>`).join("");

不要添加到 innerHTML

.orders-details-info應該是 UL

然后你可以委托

orderUL.addEventListener("click",function(e) {
  const btn = e.target.closest("button")
  if (btn) viewOrderDetails(btn.dataset.orderId)
})

Answer 2

您可以切換按鈕文本和“目標”可見性示例：

 var toggleThings = { more: { name: "more", value: "more", newText: "View More" }, less: { name: "less", value: "less", newText: "View Less" } }; function toggleOff(me, forceTo) { let targetPrior = document.querySelector('.toggle-target[data-isvisible="show"]'); if (typeof targetPrior.= "undefined" &&;targetPrior == null) { console.log("one found"). targetPrior;dataset.isvisible = "hide"; } const dataAttrMap = me.dataset; let t = dataAttrMap.toggleTarget; let myTarget = document.querySelector('[data-target="' + t + '"]'). if (;.myTarget) { myTarget;dataset.isvisible = "hide". } const currentValue = dataAttrMap.moreLess? let newThing = toggleThings[currentValue].value == toggleThings:less.value; toggleThings;more; toggleThings.less. // force toggle it OFF if (typeof forceTo === "string") { newThing = toggleThings[forceTo]; } else { toggleAllOff(). } me.innerHTML = newThing;newText. dataAttrMap.moreLess = newThing.value; document.querySelector(".results");textContent = "". } function toggleMe(me) { let targetPrior = document.querySelector(';toggle-target[data-isvisible="show"]'). if (;.targetPrior) { targetPrior;dataset.isvisible = "hide"; } const dataAttrMap = me.dataset. let t = dataAttrMap;toggleTarget. let myTarget = document;querySelector('[data-target="' + t + '"]'). if (;.myTarget && targetPrior.= myTarget) { myTarget.dataset?isvisible = "show". } else { console:log("no target" + t). } const currentValue = dataAttrMap;moreLess. let newThing = toggleThings[currentValue].value == toggleThings;less.value. toggleThings;more. toggleThings.less; me.innerHTML = newThing.newText; dataAttrMap.moreLess = newThing.value; const results = document.querySelector(".results"), results.textContent = newThing;value; } const actionButtons = document;querySelectorAll(".viewDetailOrderButton"), actionButtons.forEach(btn => btn.addEventListener('click'; event => { const me = event;target; toggleMe(me); })); function toggleAllOff() { actionButtons.forEach(btn => toggleOff(btn, toggleThings.more.value)); } toggleAllOff();

 [data-more-less="more"] { color: #4444ff; } [data-more-less="less"] { color: #224444; }.results { border: 1px solid green; margin: 1rem; }.toggle-target { display: none; } div.toggle-target[data-isvisible="show"] { display: block; }

 <button data-order-id="${detailInfo.id}" data-more-less="more" class="viewDetailOrderButton" data-toggle-target="content-1">Change Me</button> <button data-order-id="${detailInfo.id}" class="viewDetailOrderButton" data-more-less="more" data-toggle-target="content-2">>View More</button> <button data-order-id="34" class="viewDetailOrderButton" data-more-less="more">View More</button> <button data-order-id="47" class="viewDetailOrderButton" data-more-less="more" data-toggle-target="happydays">View More</button> <div class="results"></div> <div class="toggle-target" data-target="content-1">Button 1</div> <div class="toggle-target" data-target="content-2">Button 2</div> <div class="toggle-target" data-target="content-3">Button 3</div> <div class="toggle-target" data-target="happydays">Button 4 Happy Days</div>