如何在jquery中禁用重复单击

时间：2018-05-26 15:09:52

标签： jquery

我有div1和div2，点击div1或div2＆＃39;段落＆＃39;将在此处显示，再次点击＆＃39;段落＆＃39;一些警报将基于div1或div2点击。之后问题是如果我在div1和div2之间切换并再次点击＆＃39;段落，重复警报即将到来。但我不想做重复提醒。任何人都可以帮助我，下面是代码。提前谢谢

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("p").hide();

     $(".div1").on("click",function(){
    // alert('hi');
     $("p").show();
         $("p").click(function(){
        alert("p inside div1");
    });
    });
     $(".div2").on("click",function(){
      $("p").show();
        $("p").click(function(){
        alert("p inside div2");
    });
    });
});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a</div>
<p class="para">paragraph</p>

</body>
</html>

5 个答案:

答案 0 :(得分：0)

您必须正确设置事件处理程序。

据我了解您的目标...... cols <- c("dimgray", "firebrick", "dodgerblue4") ggplot(data.table::melt(setDT(tt), id = "Month", variable.factor = FALSE), aes(x = Month, y = value)) + geom_boxplot(aes(group = interaction(Month, variable), fill = variable), alpha = 0.6) + stat_summary(aes(color = variable), fun.y = mean, geom = "smooth") + scale_fill_manual(values = cols) + scale_color_manual(values = cols) + scale_x_continuous(breaks = 1:12) 和div1点击只会更改“参考”。并且应该在div2点击时发出提醒。

所以就这样写吧！

p
$(document).ready(function(){
  $("p").hide();

  var alertText;  // A variable to use as a "reference".
  
  $(".div1").one("click",function(){
    $("p").show();
    alertText = "Click on the first div.";
  });

  $(".div2").one("click",function(){
    $("p").show();
    alertText = "Click on the second div.";
  });
  
  $("p").on("click",function(){
    if(alertText!=""){
      alert(alertText);
    }
    alertText="";
  });
  
});

修改
要仅使警报一次，您可以使用.one()绑定处理程序只执行一次。

然后在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"><a href="#">div1</a></div> <div class="div2"><a href="#">div2</a></div> <p class="para">paragraph</p>点击，使用p处理程序设置的文本进行提醒，然后刷新该文本的值。仅在设置了文本时发出警报的条件才会产生您正在寻找的效果。

答案 1 :(得分：0)

简单的方法是在导航项上切换选定的类，并在单击段落

时查找该类 

$('.nav-item').click(function(){
   $('.para').show();
   $('.nav-item.selected').removeClass('selected')
   $(this).addClass('selected')
})

$('.para').click(function(){
   var selected = $('.nav-item.selected a').text()
   console.log('selected is ', selected)
})
p.para{display:none}
.selected a{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav>
  <div class="nav-item"><a href="#">div1</a></div>
  <div class="nav-item"><a href="#">div2</a></div>
</nav>
<section>
  <p class="para">paragraph</p>      
</section>

答案 2 :(得分：0)

＆＃13;
＆＃13; 
$(document).ready(function() {
  var div;
  $("p").hide();
  $(".div1").on("click", function() {
    $("p").show();
    div = 'div 1';
  });

  $(".div2").on("click", function() {
    $("p").show();
    div = 'div 2';
  });

  $("p").click(function() {
    alert("p inside " + div);
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a></div>
<p class="para">paragraph</p>
＆＃13;
＆＃13;
＆＃13;

您错过了标记上的尖括号（>）。我认为代码结构就像上面那样。感谢。

答案 3 :(得分：0)





    $(document).ready(function() {
      var div;
      var count = 0;
      $("p").hide();
      $(".div1").on("click", function() {
        $("p").show();
        div = 'div 1';
        count = 0;
      });

      $(".div2").on("click", function() {
        $("p").show();
        div = 'div 2';
        count = 0;
      });

      $("p").click(function() {
        if( count === 0 ){
            alert("p inside " + div);
        }
        count++;
      });
    });


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="div1"><a href="#">div1</a></div>
    <div class="div2"><a href="#">div2</a></div>
    <p class="para">paragraph</p>
















    $(document).ready(function() {
      var div;
      var count;
      $("p").hide();
      $(".div1").on("click", function() {
        $("p").show();
        div = 'div 1';
      });

      $(".div2").on("click", function() {
        $("p").show();
        div = 'div 2';
      });

      $("p").click(function() {
        alert("p inside " + div);
      });
    });


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="div1"><a href="#">div1</a></div>
    <div class="div2"><a href="#">div2</a></div>
    <p class="para">paragraph</p>

＆＃13;
＆＃13; 
    $(document).ready(function() {
      var div;
      var count = 0;
      $("p").hide();
      $(".div1").on("click", function() {
        $("p").show();
        div = 'div 1';
        count = 0;
      });

      $(".div2").on("click", function() {
        $("p").show();
        div = 'div 2';
        count = 0;
      });

      $("p").click(function() {
        if( count === 0 ){
            alert("p inside " + div);
        }
        count++;
      });
    });
＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="div1"><a href="#">div1</a></div>
    <div class="div2"><a href="#">div2</a></div>
    <p class="para">paragraph</p>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
    $(document).ready(function() {
      var div;
      var count;
      $("p").hide();
      $(".div1").on("click", function() {
        $("p").show();
        div = 'div 1';
      });

      $(".div2").on("click", function() {
        $("p").show();
        div = 'div 2';
      });

      $("p").click(function() {
        alert("p inside " + div);
      });
    });
＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="div1"><a href="#">div1</a></div>
    <div class="div2"><a href="#">div2</a></div>
    <p class="para">paragraph</p>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

我认为当我用该场景调用ajax时这可能是正确的

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").hide();

  var ajaxuri;  // A variable to use as a "reference".

  $(".div1").on("click",function(){
    $("p").show();
    ajaxuri=0;

  });

  $(".div2").on("click",function(){
    $("p").show();
    ajaxuri=1;

  });

  $("p").on("click",function(){
  alert(ajaxuri);
    $.ajax({
        type: "GET",
        url: "http://localhost/bootstrap/onclick/response.json?id="+ajaxuri,
        success: function(result) {
            $("#name1").text(result.critical[0].name);
            $("#value1").text(result.critical[0].value);

            $("#name2").text(result.major[0].name);
            $("#value2").text(result.major[0].value);

            $("#name3").text(result.minor[0].name);
            $("#value3").text(result.minor[0].value);
        }
    });
  });

});
</script>
</head>
<body>
<div class="div1"><a href="#">div1</a></div>
<div class="div2"><a href="#">div2</a></div>
<p class="para">paragraph</p>

</body>
</html>
相关问题
最新问题