Получить атрибут href по событию click с помощью Javascript и Framework7 - PullRequest
Новая
       42

Получить атрибут href по событию click с помощью Javascript и Framework7

0 голосов
/ 31 октября 2019

Я борюсь с очень простой проблемой, которую не могу решить.

Я использую Framework7 (JS Framework для мобильных приложений), и у меня есть два списка на моей странице:

Первый список : 

<ul>
     <li>
         <a id="android" class="link external" target="_blank" href="android_link"></a>
     </li>
     <li>
         <a id="iOS" class="link external" target="_blank" href="ios_link"></a>
     </li>
     <li>
         <a id="windows" class="link external" target="_blank" href="windows_link"></a>
     </li>                                   
 </ul>

Второй список : 

<ul>
    <li>
        <a href="fb_link" target="_blank"  class="item-link item-content link external" id="facebook">
            <div class="item-media">
                <i class="f7-icons">logo_facebook</i>
            </div>
            <div class="item-inner">
                <div class="item-title">Facebook</div>
            </div>
         </a>
    </li>

    <li>
        <a href=instagram_link" target="_blank"  class="item-link item-content link external" id="instagram">
            <div class="item-media">
                <i class="f7-icons">logo_instagram</i>
            </div>
            <div class="item-inner">
                <div class="item-title">Instagram</div>
            </div>
         </a>
    </li>                                  
</ul>

Итак, мне нужно взять атрибут href при событии click,Я написал это: 

Dom7('.link.external').on('click', (event) => {
    // First try
    href = event.target.getAttribute('href')
    console.log(href)

    // Second trye
    console.log(event.srcElement.href)

    // Third try
    var href = Dom7('a.link.external').attr('href');
    var id = Dom7('a.link.external').attr('id');
    console.log(href)
    console.log(id)

  })

Я пробовал три разных решения, но ни одно из них не работает.

Первое и второе работают только для первого списка, я думаю, потому чтоТег <a> не содержит html внутри.

Третий всегда возвращает мне href и id первых элементов первого списка (android), даже если я нажимаю во втором списке.

Можете ли вы помочь мне решить эту проблему?

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Раствор 1 

<ul>
 <li>
     <a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
 </li>                                  
</ul>

<script>
  function linkClicked(object) {
      consile.log(object.getAttribute("href"));
      return false;
  }
</script>

Раствор 2 

var elements = document.getElementsByClassName('link');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', linkClicked, false);
}

function linkClicked() {
    console.log(this.getAttribute("href"));
};
0 голосов
/ 31 октября 2019

если вы можете использовать jquery, используйте этот рабочий код: 

$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);

});

jsfiddle

...