Переключить только одну кнопку показать больше / меньше показать на сайте с несколькими кнопками с одинаковым идентификатором

Question

Когда я нажимаю кнопку «показать больше», показывается больше изображений из галереи, и «показывать больше» изменяется на «показывать меньше». Тем не менее, поскольку я работаю с шаблонами и записями ExpressionEngine (CMS), id одинаков для каждой кнопки «показать больше» на странице, в результате чего другие кнопки меняют свое значение innerText, когда они на самом деле не имеютбыли нажаты. Мне нужно, чтобы мой код отражал нажатие только одной кнопки.

Поскольку я работаю в шаблоне CMS, я хотел бы использовать только HTML и JavaScript.

Вот мой код:

{if image:total>6}
<button class="btn btn-primary mx-auto" id="showMoreButton" type="button" data-toggle="collapse" data-target="#collapse-{embed:park_url}-{park_facilities_relate:url_title}" aria-expanded="false" aria-controls="collapseExample" onclick="showLess()">SHOW MORE</button>
{/if}       

<script>
    var status = "less";
    function showLess() {
        if (status == "less") {
            document.getElementById("showMoreButton").innerText = "SHOW LESS";
            status = "more";
        } else if (status == "more") {
            document.getElementById("showMoreButton").innerText = "SHOW MORE";
            status = "less"
        }
    }
</script>

Результаты того, что происходит, на самом деле различаются в зависимости от того, где находится тег script (если я поставлю тег script под кодом button против кода script надbutton код). Вот изображение того, что происходит:

Answer 1

Чтобы изменить текст кнопки, вы можете использовать событие вместо getElementById (). Для этого добавьте this к вашей функции вызова на кнопку.

onclick=”showLess(this)”

Таким образом, вы можете получить все атрибуты только той кнопки, на которую вы фактически нажали. В скрипте это может выглядеть так:

function showLess(event) {      
   if (event.innerText == "SHOW MORE") {
        event.innerText = "SHOW LESS";
    } else if (event.innerText == "SHOW LESS") {
        event.innerText = "SHOW MORE";
    }
}

Не знаю ничего о фактическом показе галереи, поэтому не могу с этим поделать, но, по крайней мере, кнопка работает.

Answer 2

так что вы могли бы использовать .id внутри своей функции.

var status = "less";
function showLess() {
    if (status == "less") {
      document.getElementById("showMoreButton").id = "showLessButton";
        document.getElementById("showMoreButton").innerText = "SHOW LESS";
        status = "more";
    } else if (status == "more") {
      document.getElementById("showLessButton").id = "showMoreButton";
        document.getElementById("showMoreButton").innerText = "SHOW MORE";
        status = "less"
    }
}

Я думаю, что у меня правильная логика, но о ней стоит подумать. все, что он собирается сделать, это изменить идентификатор элемента, чтобы он оставался уникальным идентификатором, и поэтому вы можете лучше контролировать его в одном состоянии, а не пытаться сделать это с чем-то, когда он в одну сторону, чем другой