Question

我是使用javascript的初学者，所以很抱歉，如果我的问题很基础，但是我找不到我的代码的解决方案。我想做的是：我有一张带有href元素列表的卡片。当用户单击链接时，我会在页面中动态添加其他卡片，然后隐藏<a>元素，以防止用户使用

双击

$$('#idLinkToHide').hide();

当所有链接都被隐藏时，当无链接可点击时，我无法显示一条消息。我试图以此方式做。

这是我的html：

<div class="accordion-item">
   <a href="#" class="item-link item-content">
      <div class="item-inner">
        <div class="item-title">Menu Select</div>
      </div>
   </a>
   <div class="accordion-item-content">
      <div class="list">
          <ul>
            <li><!-- this is the div where I'd like to show the message--> 
                <div id="messageAccordion"></div>
            </li>
            <li>
              <a  href="javascript:addCard1();" class="link" id="linkAd1">
                <div class="item-media"><i class="f7-icons">add_round_fill </i></div>
                <div class="item-inner">
                    <div class="item-title">Add Canel 1</div>
                  </div>
                </a>
            </li>

            <li>
              <a href="javascript:addCard2();" class="link" id="linkAd2">
                <div class="item-media"><i class="f7-icons">add_round_fill</i></div>
                <div class="item-inner">
                    <div class="item-title">Add Card 2</div>
                  </div>
              </a>
            </li>

            <li>
              <a href="javascript:addCard3();" class="link button-round" id="linkAllevamenti">
                <div class="item-media"><i class="f7-icons">add_round_fill </i></div>
                <div class="item-inner">
                    <div class="item-title">add Card 3</div>
                  </div>
              </a>
            </li>

           <!-- other <li><li> element -->
          </ul>
      </div>
   </div><!--accordion-content-->
</div><!--accordion-->

为了完成任务，我尝试检索手风琴项目内容中的所有<a>元素，然后计算其中有多少个链接，计算隐藏的链接，最后进行比较以检查是否所有链接都是隐藏与否...但是，在我检索所有链接<a>之后。然后，我访问返回CSSStyleDeclariotn对象的样式，但是我无法访问cssText属性以查看链接是否具有“ display：none”。当我在控制台上检查时，我有一个空元素...

这是我的代码

   var numLink = 0;
   var numLinkHidden = 0;

   for (const a of document.querySelectorAll('.accordion-item-content .list li a')) {

       numLink = numLink + 1;

       var linkStyle = a.style.cssText;

       if(linkStyle == "display: none;") {

          numLinkHidden = numLinkHidden + 1;
       }
  } 

  if( numLinkHidden == numLink){

      document.getElementById("messageAccordion").innerHTML = 'You have already added all Card available';

  }

预先感谢您的帮助

Answer 1

如果您使用的是jQuery，则可以执行以下操作：

if( $(item).is(':visible') ){
   /* do something ... */
}

Answer 2

仅几个建议：

1）您拼错了.innerHTML：p

2）为什么不定位document.querySelectorAll（'。link'）

a）我这样做的原因是您正在尝试使用以下类访问元素 -手风琴项目内容，清单，li，a

b）您可以尝试document.querySelectorAll（'。accordion-item-content> .list> li> a'）匹配位于.list分类元素下的列表下方的所有锚标记，然后依次在.accordion-item-content元素下

如果您随后可以将元素检索为非null实体，这可能是您要寻找的！

https://www.w3schools.com/jsref/prop_style_csstext.asp

Answer 3

请参见下面的演示

const list = document.querySelector(".list");
const linkCount = document.querySelectorAll(".link").length;

list.addEventListener("click", function(event) {
  // stop the default click action happening e.g. navigating to a new URL
  event.preventDefault();

  // check to make sure the correct item was clicked
  const element = event.target.closest("li");
  if ( !element  || element.id == "messageAccordion") return;

  // hide the list item and do whatever add logic you want
  element.classList.add("hide");
  add(element);

  function add(element) {
  //place you code for adding here
    alert("adding element")
  }

  // check if the all the links have been clicked
  const hiddenCount = document.querySelectorAll(".hide").length;
  const message = document.querySelector("#messageAccordion");
  if (linkCount == hiddenCount && !message.textContent) {
    message.textContent = "You have already added all Card available";
  }
})

.hide {
  display: none;
}

<div class="accordion-item">
  <a href="#" class="item-link item-content">
    <div class="item-inner">
      <div class="item-title">Menu Select</div>
    </div>
  </a>
  <div class="accordion-item-content">
    <div class="list">
      <ul >
        <li id="messageAccordion"></li>
        <li>
          <a href="" class="link" id="linkAd1">
            <div class="item-media"><i class="f7-icons">add_round_fill </i></div>
            <div class="item-inner">
              <div class="item-title">Add Canel 1</div>
            </div>
          </a>
        </li>

        <li>
          <a href="" class="link" id="linkAd2">
            <div class="item-media"><i class="f7-icons">add_round_fill</i></div>
            <div class="item-inner">
              <div class="item-title">Add Card 2</div>
            </div>
          </a>
        </li>

        <li>
          <a href="" class="link button-round" id="linkAllevamenti">
            <div class="item-media"><i class="f7-icons">add_round_fill </i></div>
            <div class="item-inner">
              <div class="item-title">add Card 3</div>
            </div>
          </a>
        </li>

        <!-- other <li><li> element -->
      </ul>
    </div>
  </div>
  <!--accordion-content-->
</div>
<!--accordion-->

它的工作原理是首先计算文档中有.link类的元素，然后放置函数以处理.list类的元素上的点击事件（我删除了HTML中的javascript，因为使用event delegation使事情更易于维护）。

响应click事件的函数将.hide类添加到所有被单击的li元素中，然后运行一个add(element)函数，该函数可以执行您想要的任何逻辑。 / p>

最后，该函数检查所有.hide类的元素是否等于页面上的链接数，如果是，则添加您的消息，但是如果消息已被添加，则什么也不做。

You can read more about events here

如何访问元素的cssText？

3 个答案: