javascript - window.location 不带条件执行

标签 javascript jquery html

<a href="www.google.com" class="social" id="social">Link one</a> 
<a href="www.cnn.com" class="social" id="social">Link two</a> 
<a href="www.facebook.com" class="social" id="social">Link three</a> 

我希望能够拥有用户:

  1. 点击链接
  2. 将链接 href 存储到 $href 变量
  3. 用户从复选框中进行选择后,将用户带到 $href 位置。

我一直在与 this fiddle 合作。

那么,如何在选择复选框后让链接转到各自的位置呢?

如果有人可以提供任何帮助或建议;我真的很感激谢谢!

p{
    display: inline-block;
}
input[type="checkbox"]:disabled + label{
    opacity: .5;
}
.faded{ color: grey;
    opacity: .5;
}

<p>Links should go to their respective locations upon checkbox selection</p>
<br>

<a href="www.google.com" class="social" id="social">Link one</a> 
<a href="www.cnn.com" class="social" id="social">Link two</a> 
<a href="www.facebook.com" class="social" id="social">Link three</a> 

<div class="know-your-role">
    <div id="checkwrapper">
        <form method="POST" action="">
            <p>Are you a</p>
            <input type="checkbox" id="check-1"  class="checkchoice student" value="1"><label for="check-1" class="choice student tooltip" title="Student">Student</label>
            <p>or</p>
            <input type="checkbox" id="check-2" class="checkchoice teach" value="2"><label for="check-2" class="choice teach tooltip" style="padding-right: 20px;" title="Teacher">Teacher</label>
            <p>?</p>
        </form>
    </div>
    <div class="style-select type">
        <input type="text" placeholder="What year" />
    </div>
    <p class="faded">       
     "What year" input should only appear when student is selected'
    </p>
</div>

JavaScript

$('.type').hide(); 
$(".know-your-role").hide();


$(".social").click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $(".wizard").hide();
    $('.know-your-role').show('fast');
    var $student = $('input:checkbox.student');
    var $teach = $('input:checkbox.teach');

    if($student.is(':checked') & $(".year").va() != ""){
        window.location.href = href;
    }else if ($teach.is(':checked')){
        window.location.href = href;
    }
});

$(function(){
    $('#check-1').change(function() {
        $('#checkwrapper').hide();
        $('.type').css('width','110px')
        $('.type').show();
    });
});

$('input:checkbox.checkchoice').click(function(){
    var $inputs = $('input:checkbox.checkchoice');
    if($(this).is(':checked')){
        $inputs.not(this).prop('disabled',true);
    }else{
        $inputs.prop('disabled',false);
    }
});

最佳答案

<a href="http://www.google.com" class="social">Link one</a> 
<a href="http://www.cnn.com" class="social">Link two</a> 
<a href="http://www.facebook.com" class="social">Link three</a> 

Id 必须唯一,href 前面必须带有 http://

if($student.is(':checked') & $(".year").va() != ""){

正确的语法是val()而不是va()

http://jsfiddle.net/knoxzin1/Jg8jT/20/

------------------------ 已编辑 -------------------------- ----------------

http://jsfiddle.net/knoxzin1/Jg8jT/29/

现在按照OP的要求工作

关于javascript - window.location 不带条件执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15482744/

相关文章:

jQuery 对话框 UI 在 IE 中不起作用

javascript - Location.country_code - Fancybox,现在弹出

javascript - jquery 显示和隐藏 mouseout() 问题

javascript - react 多个回调不更新本地状态

javascript - 在 "kn"而不是 "n^2"时间求解数组值的和练习

php - 允许虚荣 URL 和 session 的单个 .htaccess 文件

javascript - 网络应用 Google 登录

javascript - 监听window onresize,不包括jquery dialog的onresize

javascript - 如何从 javascript 提交带有本地列表的表单

javascript - 播放动画然后加载下一页