Weebly - встроенный элемент HTML-кода не работает (скрипт Jquery) - PullRequest
Новая
       13

Weebly - встроенный элемент HTML-кода не работает (скрипт Jquery)

0 голосов
/ 04 декабря 2018

По этой ссылке: https://www.equilibriumtherapy.pt/artemisa.html Я намереваюсь получить текстовый элемент "нажмите, чтобы показать".

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

Кажется, что функция .click захватывает все щелчки мыши после первого!

Пожалуйста, помогите мне в этом.

Спасибо 

<!DOCTYPE html>
<html>
<head>



<script>

$(document).ready(function () {
    var n = 0;
        var i = 0;
        var phone = "+351919260713​";
        var format = phone.slice(0,4)+" "
                    +phone.slice(4,7)+" "
                    +phone.slice(7,10)+" "
                    +phone.slice(10,13)+" ";
    var hidden = format.slice(0,12)+" XXX";
        $('.phoneNo').text(hidden);
//       
           $('.phoneWrap').click(function(e){
//              $('.phoneWrap').focus(function(){
//            var location = $('a').attr("href");
              $("a").removeAttr('href');
              $('.phoneNo').text(format);
              $('.phoneLabel').text("(Clica para Ligar)");
//            $('.aux').text(n);
              if(n>=1){
                 $("a").attr("href", "tel:"+phone);
//               $("a").attr("href", "null");
          }
            ++n;
            return 0;
//         });
    });

//$('.aux2').text("exited "+i);
++i;
});

</script>

<style>


body{
  font-family: montserrat,sans-serif;
  font-size: .8em;
  letter-spacing: -.02em;
  display: block;
}

div.phoneWrap {
    line-height: normal;
}
div.phoneWrap .phoneNo {
    font-weight: 700;
    font-size: 1.2em;
}

a{
  margin-top: 4px;
  background-color: transparent;
  width: 100%;
  border: none;
  padding: 5px 0;
  font-size: 1.6em;
  line-height: 1.8em;
  color: #ffffff;
  border: none;
  text-decoration: none;
  display: block;
  text-align: center;
  cursor: pointer;
}


</style>

</head>
<body>

<a>
    <i></i>
    <div class="phoneWrap"> 
        <div class="phoneNo"></div>
        <div class="phoneLabel">(Clica para ver Telefone)</div>
        <div class="aux"></div>
                <div class="aux2"></div>
    </div>
</a>

</body>



</html>

РЕДАКТИРОВАТЬ

Я нашел решение!

Вот код: 

<!DOCTYPE html>
<html>
<head>



<script>

$(document).ready(function () {
    var n = 0;
        var i = 0;
        var phone = "+351919260713​";
        var format = phone.slice(0,4)+" "
                    +phone.slice(4,7)+" "
                    +phone.slice(7,10)+" "
                    +phone.slice(10,13)+" ";
    var hidden = format.slice(0,12)+" XXX";
        $('.phoneNo').text(hidden);      
        $('.phoneWrap').click(function(e){
            $("#clk_link").removeAttr('href');
              $('.phoneNo').text(format);
              $('.phoneLabel').text("(Clica para Ligar)");
//              $('.aux').text(n);
              if(n>=1){
                 $("#clk_link").attr("href", "tel:"+phone);
          }
              ++n;
        }); //close .click
//$('.aux2').text("exited "+i);
++i;
}); //Close document ready

</script>

<style>


body{
  font-family: montserrat,sans-serif;
  font-size: .8em;
  letter-spacing: -.02em;
  display: block;
}

div.phoneWrap {
    line-height: normal;
}
div.phoneWrap .phoneNo {
    font-weight: 700;
    font-size: 1.2em;
}

#clk_link{
  margin-top: 4px;
  background-color: transparent;
  width: 100%;
  border: none;
  padding: 5px 0;
  font-size: 1.6em;
  line-height: 1.8em;
  color: #ffffff;
  border: none;
  text-decoration: none;
  display: block;
  text-align: center;
  cursor: pointer;
}


</style>

</head>
<body>

<a href="#" id="clk_link">
    <i></i>
    <div class="phoneWrap"> 
        <div class="phoneNo"></div>
        <div class="phoneLabel">(Clica para ver Telefone)</div>
        <div class="aux"></div>
                <div class="aux2"></div>
    </div>
</a>

</body>



</html>
...