javascript - 在 Javascript 中使用 if than else 禁用和启用文本链接

Question

代码如下:

CSS:

.enableLink{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#069;
    padding-right:20px;
    text-decoration:underline;
    cursor:pointer;
}
.disableLink{
    display:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#069;
    padding-right:20px;
    text-decoration:underline;
    cursor:default;
}
.btnToPage {
    background-color:#ededed;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#7c7c7c;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    cursor:default;
}

.btnToPage:active {
    position:relative;
    cursor:pointer;
}
.myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
    background-color:#378de5;
}
.myButton:active {
    position:relative;
    top:1px;
}

HTML:

<span class="enableLink">Enable</span> 
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>

我使用javascript来运行HTML&CSS，但是这段代码似乎并不好也不简单。

JS:

$(document).ready(function(){ 
    // JS Enable
    $(".enableLink").click(function(){  
        // Enable Button Go to page 2
        $("#btnNext").removeClass("btnToPage").addClass("myButton");
        $(".enableLink").hide();
        $(".disableLink").show().css({"cursor":"pointer"});
    });
    // JS Disable
    $(".disableLink").click(function(){ 
        // Disable Button Go to page 2
        $("#btnNext").removeClass("myButton").addClass("btnToPage");
        $(".disableLink").hide();
        $(".enableLink").show();
    });
    // Redirect to another page?
    $(".myButton").click(function(){
        window.open("page2.html", target="_self");
    });
});

我在这里有 2 个问题。首先，如何在//JS Enable &//JS Disable 中使代码if than else。其次如何在 enableLink 类中激活 myButton 类后创建正确的 redirect link ..上面的最后一个代码无法转到下一页..重定向代码有什么问题，帮助我的人提前谢谢你。

JSFiddle 中的示例:https://jsfiddle.net/kw5nyx4f

Answer 1

你可以大大简化事情......

$('span').on('click', function() {
    $("#btnNext").toggleClass("myButton");
    $(this).toggle();
    $('span').not(this).toggle();
  });
  
  $("#btnNext").on('click', function(){
      if ($(this).hasClass('myButton')) {
		window.location.href = 'http://www.example.com';
        } else {
          //Insert click on disabled function here, if any.
          }
	});

body { margin: 40px; }

.enableLink{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#069;
	padding-right:20px;
	text-decoration:underline;
	cursor:pointer;
}
.disableLink{
	display:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#069;
	padding-right:20px;
	text-decoration:underline;
	cursor:default;
}
.btnToPage {
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#7c7c7c;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	cursor:default;
}

.btnToPage:active {
	position:relative;
	cursor:pointer;
}
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
	background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="enableLink">Enable</span> 
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>

只需将事件类设置为切换而不是 remove/addClass 这就是切换的目的。

将点击事件更改为仅切换跨度的可见性。这意味着您不需要具体点击了哪个 span。 jQuery 知道点击了什么并且可以对其他类似的、未点击的元素采取行动。

并且我更改了按钮点击，以 ID 为目标，而不是类。然后检查它是否处于事件状态...如果是...运行 href。

根据标记中的其他元素，仅对点击事件使用通用 span 可能会也可能不会成为问题。如果是，您可以让这两个跨度具有相同的类，然后定位类而不是跨度。