Блог

Главная - Вопросы по программированию - Привет. Почему «не отображать» не применяется

Привет. Почему «не отображать» не применяется

#javascript #dom

Вопрос:

Я хочу скрыть блок, где идентификатор заканчивается на _event_2 или _event_1. https://i.stack.imgur.com/8pVff.png Я немного исправил код.

 let tabMyMarketHistory = document.getElementsByClassName("market_tab_well_tabs")[0];
let aDisplayNoneListing = document.createElement('a');
let spanDisplayNoneListing = document.createElement('span');
aDisplayNoneListing.id ="displayNoneListingCanceledCreated";
aDisplayNoneListing.className ="market_tab_well_tab";
spanDisplayNoneListing.className ="market_tab_well_tab_contents";
spanDisplayNoneListing.textContent ="Clear";
aDisplayNoneListing.append(spanDisplayNoneListing);
tabMyMarketHistory.append(aDisplayNoneListing);

let DisplayNoneListing =document.getElementById("displayNoneListingCanceledCreated");
DisplayNoneListing.onclick = function() { 
    DisplayNoneListing.className = "market_tab_well_tab market_tab_well_tab_active";
    let itemDetals =document.querySelectorAll(`div[id^="history_row"]`);
    if (itemDetals.length > 0) {
        for (let i= 0; i < itemDetals.length; i  ) {
            if (itemDetals[i].id.includes('event_1') || itemDetals[i].id.includes('event_2')) {
                document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
                console.log(document.getElementById(itemDetals[i].id.toString()));
            }
        }
        
    }
};
        
    }

Большое вам спасибо за ваши комментарии.

Ответ №1:

Это работает для меня, оно скрыто, но не без того, когда я удаляю 1 из конца идентификатора:

 let itemDetals = document.querySelectorAll(`div[id^="history_row"]`);
if (itemDetals.length > 0) {
  for (let i = 0; i < itemDetals.length; i  ) {
    if (itemDetals[i].id.includes('_event_1') || itemDetals[i].children[6].firstElementChild.id.includes('_event_2')) {
        document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
        console.log(itemDetals[i].id.toString());
    }
  }
} 
 <div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_1">Hi</div>

Ответ №2:

Не совсем уверен, чего вы пытаетесь достичь со следующей строкой. Можете ли вы это объяснить?

 itemDetals[i].children[6].firstElementChild.id.includes('_event_2')

Я изменил его, чтобы он выглядел event_2 точно так же, как и первый, как я думал, и он отлично работает даже на детях div (если это то, чего вы пытались достичь, это мое предположение). Вы в основном нацеливаетесь на всех дивов в DOM, независимо от того, являются ли они детьми или нет.

PS: Две маленькие придирки. Вы должны переименовать детали в детали (ошибка с орфографической ошибкой) и изменить «включает», чтобы искать только event_1 «или event_2 «, так _ как лишнее вроде как не нужно.

Вот код:

 <html>
    <body>
        <div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_3">
            Event 3 - Parent
            <div class="market_listing_row market_recent_listing_row" id="history_row_329718889ee4015887588_event_2">Event 1 - Child</div>
        </div> 
        <div class="market_listing_row market_recent_listing_row" id="history_row_3297188894015887588_event_1">
            Event 1 - Parent
            <div class="market_listing_row market_recent_listing_row" id="history_row_329714015887588_event_2">Event 2 - Child</div>
        </div> 

        <script>
            let itemDetals = document.querySelectorAll(`div[id^="history_row"]`);
            if (itemDetals.length > 0) {
                for (let i= 0; i < itemDetals.length; i  ) {
                    if (itemDetals[i].id.includes('event_1') || itemDetals[i].id.includes('event_2')) {
                        document.getElementById(itemDetals[i].id.toString()).style.display = 'none';
                    }
                }
            }
        </script>
    </body>
</html>
Метки: