Отображать только выбранные элементы - Javascript заменяет innerHTML - PullRequest
Новая
       10

Отображать только выбранные элементы - Javascript заменяет innerHTML

1 голос
/ 10 июля 2019

Я пытаюсь сделать "фильтр по выбору" , используя кнопку раскрывающегося списка.
Всякий раз, когда пользователь нажимает на элемент определенного типа (например, одежду в моем примере), в html отображаются только элементы, соответствующие критериям (только одежда). Мне удалось выбрать элементы, которые я хотел, и поместить в массив, однако, когда я пытаюсь заменить div новым массивом, вывод будет [object HTML Element].
Забавно, если Я console.log массив с определенным значением, (array[0]) он показывает HTML-код, который мне нужен. 

<div class="dropdown-menu" >
                <a class="dropdown-item" onClick="filter('clothes')" >Clothes</a>
<a class="dropdown-item" onClick="filter('electronics')" >Electronics</a>
</div>

 <div id="testSearch">
            <section name="product"> 
                <img value="clothes" src="./some.jpg" alt="Clothes 01">
                <h5>Electronic</h5>
            </section>
                <section name="product"> 
                <img value="electronics" src="./some2.jpg" alt="Electronics 01">
                <h5>Electronic</h5>
            </section>

</div>

 <!-- My code has different sections with a variety of value/h5 -->

<script>
function filter(x) {

    var arraySearch = [];

    var input = document.getElementsByName('product');

    for (i=0; i < input.length; i++) {

    if(input[i].innerHTML.indexOf(x) > 0 ) {
        arraySearch[i]= input[i];
        result = result + arraySearch[i];
        }

    }
    document.getElementById('testSearch').innerHTML = result;
    <!-- my html display only [object HTMLElement], if more than a section matches, then it displays the [object HTMLElement] times the number of sections matched -->

}

</script>

Я ожидаю, что выходные данные объекта [HTMLElement] будут разделами, которые соответствуют критериям.

1 Ответ

0 голосов
/ 10 июля 2019

Я сделал это!Практически мне нужно было .outerHTML при передаче массива в var result.

Вот рабочий код: 

<div class="dropdown-menu" >
                <a class="dropdown-item" onClick="filter('clothes')" >Clothes</a>
                <a class="dropdown-item" onClick="filter('electronics')" >Electronics</a>
</div>

 <div id="testSearch">
            <section name="product"> 
                <img value="clothes" src="./some.jpg" alt="Clothes 01">
                <h5>Electronic</h5>
            </section>
                <section name="product"> 
                <img value="electronics" src="./some2.jpg" alt="Electronics 01">
                <h5>Electronic</h5>
            </section>

</div>

 <!-- My code has different sections with a variety of value/h5 -->

<script>
function filter(x) {

    var arraySearch = [];

    var input = document.getElementsByName('product');
    var result = " ";

    for (i=0; i < input.length; i++) {

    if(input[i].innerHTML.indexOf(x) > 0 ) {
        arraySearch[i]= input[i];
        result = result + arraySearch[i].outerHTML;
        }

    }
    document.getElementById('testSearch').innerHTML = result;

}

</script>

Вот и все.Надеюсь, это кому-нибудь поможет.

...