riyadi riyadi - 3 months ago 9
Ajax Question

Disable and enable text link with if than else in Javascript

The code as shown below :

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>


I use javascript to run HTML&CSS, but this code doesn't seems not good and simple.

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");
});
});


I have 2 questions here. First, how to make the code if than else in //JS Enable & //JS Disable. Secondly how to create a correct redirect link after myButton class active in enableLink class.. the last code above can't go to the next page.. what is wrong in the redirect code, those who helped me thank you in advance.

Examples in JSFiddle: https://jsfiddle.net/kw5nyx4f

Answer

You can greatly simplify things...

$('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>

Merely set the active class to toggle rather than remove/addClass this is what the toggle is for.

Altered the click event to merely toggle visibility of the spans. This means you don't need to specific which span was clicked. jQuery knows what was clicked and can act upon other similar, unclicked elements.

And I altered the button click, target the ID, not the class. Then check if it's active... and if so.. run the href.

Depending on other elements within the markup, using just the generic span for the click event may or may not be an issue. If it is, you can just make both those spans have the same class, and then target the class rather than the span.

Comments