javascript - 如何控制a标签的跳转？

Question

<p class="options option1">
            <p id="a1">哈哈</p>
            <p id="a2">嘿嘿</p>
            <p id="a3">呵呵</p>
</p>
<p class="next"><a href="#page3">跳转到id=page3</a></p>

一个选择题，设置a标签的锚链接，选择之后点击a标签跳转到该id的部分；
我现在想判断如果没有点击，也就是没有选择的话，点击a标签不跳转，怎么办呢？
我是这么写的

$(function(){
    var $ap = $(".option1 p");
    $ap.click(function(){
        $(this).css('background','#7B5AD6').siblings().css('background','');
        aId = this.id;
    })
    if(!aId){
        $('.next a').click(function(){
            return false;
        })
    }
})

这么写有错误，请问该怎么写呢？

Answer 1

$(function(){
    var $ap = $(".option1 p");
    var aId;
    $ap.each(function(){
        $(this).click(function(){
                $(this).css('background','#7B5AD6').siblings()
                .css('background','');
                aId = $(this).attr("id");
        })
    });

   $('.next a').click(function(){
       if(!aId){
           console.log(0);
           return false;   //没有点击
       }else{
          console.log(1);  //点击了
       }
    });
})

demo

Answer 2

你好，我用你写的代码试了下，首先，你的aId是click函数里的局部变量，下面的if函数没法读取，此时aId是未定义的，值为undefined，当然!aId就一直为true了。
我加上了全局变量aId定义，且在click函数里加了return，但if函数仍然读取不到click函数里的aId,只能读取全局变量aId。
我也期待有人给出解答

Answer 3

$(function(){
    var $ap = $(".option1 p");
    var aId = null;
    $ap.click(function(){
        $(this).css('background','#7B5AD6').siblings().css('background','');
        aId = this.id;
        $('.next a').unbind('click');
        $('.next a').click(function(){
            if(aId){
                alert(aId);
                return false;
            }
        });
    });
});

非常丑的写法，点击p标签时再为a标签绑定点击事件，菜鸟一个，还望大神更正。

追加：
其实题主的方法也没有错，把if判断放在click函数里就行了。

Answer 4

给你注释一下代码

$(function(){
    var $ap = $(".option1 p");
    $ap.click(function(){
    var aID; // 不要用全局变量，不好，闭包就可以了
     $(this).css('background','#7B5AD6').siblings().css('background','');
        aId = this.id;
    })
    //这个if是在$（function(){}）中，是document ready之后执行的语句
    //所以这个事件是一定加不上
    /*if(!aId){
        $('.next a').click(function(){
            return false;
        })
    }*/
    //这样写才是点击 a 之后判断是不是p被点击了
     $('.next a').click(function(){
         if(!aId){
           return false;
          }
     })
})

Answer 5

<p class="options option1">
<p id="a1">哈哈</p>
<p id="a2">嘿嘿</p>
<p id="a3">呵呵</p>
</p>
<p class="next"><a href="javascritp:;">跳转到id=page3</a></p>
<script>
$(function(){
  $('#options p').on('click',function(){
    var href = $(this).attr('id');
    $('.next a').attr('href', "#page" + href );
  });
});
</script>

Answer 6

事件绑定 on

$("ele").on("click","ele",function(){
    ....
})

Answer 7

點擊時對選項曆遍一下，沒有選就return false。