欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使用jQuery通過單擊卡片內的按鈕來切換內部div上的隱藏類？

CSS
老白2年前9瀏覽0評論

如何在jQuery中創建功能，通過點擊卡片內的按鈕來切換內部div上的隱藏類？

我試圖創建一個容器div，里面有一些卡片。問題是當我點擊按鈕時 如果我再次單擊它，它只會打開面板，而不會關閉面板。 然而，如果我打開一個新的面板，它就會被關閉(這是我希望發生的事情)

另一件事是，hideAllPanels和showMoreInfo在只有一個處于活動狀態時工作。

function handleMoreInfo() {
  // 1) Find the coin-card element 
  $(".coin-card").on("click",async function(e) {
    // a) stop bubbling
    e.stopImmediatePropagation();

    // b) Find coin id
    const coinID = ($(this).find('.coin-name').text()).toLowerCase();
    
    // c) Get more info about the coin
    const data = await fetchMoreInfo(coinID);

    // d) Optional: hide all panels
    // if(nodeList) hideAllPanels();

    // e) display the chosen more info panel
    if (data) showMoreInfo(data,$(this));
  });
}

const showMoreInfo = (data,thatCoin) => {
  // 1) Find all classes on more-info-panel and then find out if class hidden exists

  // 2) Toggle more-info-panel between displayed and hidden

  nodeList[0].forEach(div => {
    const coinNameFromArr = $(div).find('.coin-name').text();

    if (coinNameFromArr.toLowerCase() === data.id ) {
      console.log('Match');
      const panel = $(div).find('.more-info-panel').attr("class");
      const panelClassesArr = panel.split(' ');


      if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
      if(panelClassesArr.length === 2) $(div).find('.more-info-panel').removeClass("hidden");
    }
  })

  // 3) Set new data inside panel
  thatCoin.find('.more-info-image').prop("src",data?.image?.large);
  thatCoin.find('.usd').text(`USD: $${data?.market_data?.current_price?.usd}`);
  thatCoin.find('.eur').text(`EUR: €${data?.market_data?.current_price?.eur}`);
  thatCoin.find('.ils').text(`ILS: ?${data?.market_data?.current_price?.ils}`);
}

const hideAllPanels = () => {
  // 1) Loop over node list of the body-container to see if some panels are open
  console.log(nodeList);
  nodeList[0].forEach(div => {
    const panel = $(div).find('.more-info-panel').attr("class");
    const panelClassesArr = panel.split(' ');

    // 2) If element have only one class it means that panel is displayed add we need to hide it
    if(panelClassesArr.length === 1) $(div).find('.more-info-panel').addClass("hidden");
  });  
}

這是一個卡片的html例子

<div class="coin-card">
    <div class="headInfo">
      <p class="coin-symbol">btc</p>
      <div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
          onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
    </div>
    <p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" onclick="handleMoreInfo()" data-toggle="collapse"
      data-target="info" num="0">More Info</button>
    <div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
        src="./src/img/bitcoin-g80ff29158_640.jpg">
      <p class="info-title">Coin Prices:</p>
      <p class="usd">USD: $30</p>
      <p class="eur">EUR: €30</p>
      <p class="ils">ILS: ?30</p>
    </div>
  </div>

我同意，你的代碼有點過于復雜。您還混合了onclick和jQuery。on('click ')，所以每次你點擊按鈕時，你基本上是給硬幣卡添加了一個新的on('click ')處理程序。

我會這樣對待它:

// you don't need an onclick on the button
$('.coin-card .btn-info').on('click', async function() {
  // find the parent .coin-card of the button that was clicked
  const $card = $(this).closest('.coin-card');
  const $infoPanel = $card.find('.more-info-panel');
  
  // const coinName = $card.find('.coin-name').text().toLowerCase();
  // const data = await fetchMoreInfo(coinID);
  // set data...
  
  
  // version 1 allow multiple panels open
  //$infoPanel.toggleClass('hidden');
  
  // or version 2 behave like accordion. close all other panels
  const isOpen = $infoPanel.hasClass('hidden');
  $('.coin-card .more-info-panel').addClass('hidden');
  if (isOpen) {
    $card.find('.more-info-panel').removeClass('hidden');
  }
});

.coin-card {
  border: 1px solid;
  margin: .5rem;
  padding: 1rem;
  float: left;
  width: 20%;
}
p {
  margin: 0;
}

.coin-card .more-info-panel.hidden {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="coin-card">
    <div class="headInfo">
      <p class="coin-symbol">btc</p>
      <div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
          onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
    </div>
    <p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
      data-target="info" num="0">More Info</button>
    <div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
        src="./src/img/bitcoin-g80ff29158_640.jpg">
      <p class="info-title">Coin Prices:</p>
      <p class="usd">USD: $30</p>
      <p class="eur">EUR: €30</p>
      <p class="ils">ILS: ?30</p>
    </div>
  </div>
  
   <div class="coin-card">
    <div class="headInfo">
      <p class="coin-symbol">btc</p>
      <div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
          onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
    </div>
    <p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
      data-target="info" num="0">More Info</button>
    <div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
        src="./src/img/bitcoin-g80ff29158_640.jpg">
      <p class="info-title">Coin Prices:</p>
      <p class="usd">USD: $30</p>
      <p class="eur">EUR: €30</p>
      <p class="ils">ILS: ?30</p>
    </div>
  </div>
  
   <div class="coin-card">
    <div class="headInfo">
      <p class="coin-symbol">btc</p>
      <div class="form-check form-switch"><input class="form-check-input" num1="0" type="checkbox"             role="switch"
          onclick="addCoinsToArray()"><label class="form-check-label" for="flexSwitchCheckChecked"></label></div>
    </div>
    <p class="coin-name">Bitcoin</p><button class="btn btn-info mybtn" data-toggle="collapse"
      data-target="info" num="0">More Info</button>
    <div class="more-info-panel hidden" symbol="bitcoin"><img class="more-info-image"
        src="./src/img/bitcoin-g80ff29158_640.jpg">
      <p class="info-title">Coin Prices:</p>
      <p class="usd">USD: $30</p>
      <p class="eur">EUR: €30</p>
      <p class="ils">ILS: ?30</p>
    </div>
  </div>