Хотите разобрать модальный # для карусели на домашней странице

Question

На домашней странице есть карусель, и я хотел бы добавить к ней onclick event для отправки данных обратно на GA. Каждая часть карусели является ссылкой.Но я хочу уточнить, какой выбор на карусели они выбрали.При наведении курсора на каждую из ссылок карусели в конце URL-адреса указывается

#carousel-modal1, #carousel-modal2, #carousel-modal3, #carousel-modal4, #carousel-modal5.

Как программно получить количество выбранных модальных каналов?

Я хотел бы добавить событие onclick с функцией.Когда я попытался, я добавил onclick к остальной части кода ниже.Я знаю, как отправить информацию обратно на GA, но, наверное, самый важный вопрос - как получить это modal #?

HTML:

<div class="carousel-item">
    <a 
        id="modal-111" 
        href="#carousel-modal" 
        onclick="myFunction()" 
        role="button" 
        data-toggle="modal">
        <img class="d-block w-100" alt="" src="/somepic.png" />
    </a>
</div>

Answer 1

Ваш вопрос в некотором роде повсеместно, но, похоже, преобладает идея, что вы хотите получить 111 из примера через событие onclick ...

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

function myFunction(){
    var id = this.id;
    var number = id.substring(id.indexOf('-')+1,id.length);
}

---

В качестве идентификатора, вы можете рассмотреть возможность использования jQuery , это делает такие вещи, какэтот способ проще:

<div class="carousel-item">
    <a 
        id="modal-111" 
        href="#carousel-modal" 
        role="button" 
        data-toggle="modal">
        <img class="d-block w-100" alt="" src="/somepic.png" />
    </a>
</div>

<!-- include the jQuery code on your site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $( document ).ready(function() {
        $('.carousel-item a').click(function(){
            var id = this.id;
            var number = id.substring(id.indexOf('-')+1,id.length);
        });
    });
</script>

В этом примере вы присоединяете функцию ко всем ссылкам привязки внутри тегов carousel-item, поэтому вам не нужно добавлять клик на каждую из них.

---

И, исходя из вашего обновления в комментариях, кажется, что вам нужно число, следующее за атрибутом href.Вот как это сделать:

function myFunction(){
    var href = this.getAttribute( 'href' );
    var number = href.substring( href.indexOf('modal')+1, href.length );
}

Посмотрите, как этот ответ изменился в зависимости от того, что вы спросили.Что вы действительно искали, так это ответы на две небольшие проблемы:

1. Как получить значение атрибута.
2. Как искать в этом значении или как искать строку.

На оба эти вопроса легко ответить с помощью Google.

По мере того, как вы создаете более продвинутые вещи, сообщество SO не собирается тратить время на расшифровку вашего вопроса.

В следующий раз обязательно потратьте много времени на то, чтобы упростить свой вопрос до самого необходимого.Убедитесь, что это так легко понять, насколько это возможно.Также обязательно создайте рабочий пример (или как можно ближе) своего кода на jsfiddle или codepen.

Вы должны стремиться потратить хотя бы час на написание вопроса.Если вы воспользуетесь этим советом, в 99% случаев вы ответите на свой вопрос, прежде чем отправлять его здесь, и это сэкономит вам много времени.Удачи.