Problem with onHover and onClick
Hey all. I am writing a web page that lists a bunch of items that the user can suggest to his friends. If he is already suggesting the item, it will display a button that says "Suggesting", otherwise, it just says "Suggest". You can then hover the suggesting button it will change colour and say "Unsuggest". When the user clicks either button, it'll turn into the other. Here is the html and css:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="suggestions.js"></script>
<style>
.suggesting {
width:100px;
background-color:#090;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color: #060;
border-style:solid;
text-align:center;
}
.unsuggest {
width:100px;
background-color:#F00;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color:#C00;
border-style:solid;
text-align:center;
}
.suggest {
width:100px;
background-color:#663366;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color:#5E005E;
border-style:solid;
text-align:center;
}
</style>
</head>
<body>
<input name='' type='button' class='suggesting' id="1" value='Suggesting' style='cursor:pointer' />
<input name='' type='button' class='suggest' id="2" value='Suggest' style='cursor:pointer' />
</body>
</html>
And the javascript looks like this:
Code:
$(document).ready(function(){
$('input[class="suggesting"]').hover(function(){
var parent = this.parentNode;
$(this).attr("class","unsuggest");
$(this).attr("value","Unsuggest");
},function(){
$(this).attr("class","suggesting");
$(this).attr("value","Suggesting");
});
$('input[class="suggesting"]').click(function(){
var SuggestId = this.id;
//$.post("handleSuggestion.php",{SuggestId:SuggestId},function(result){});
$(this).attr("class","suggest");
$(this).attr("value","Suggest");
});
$('input[class="suggest"]').click(function(){
var SuggestId = this.id;
//$.post("handleSuggestion.php",{SuggestId:SuggestId},function(result){});
$(this).attr("class","suggesting");
$(this).attr("value","Suggesting");
});
});
Everything works, except for when I click the suggesting button, it only changes for one second, then changes back. Any thoughts?
why do you use constructions like
Code:
...this.parentNode;
...$(this).attr("class","suggesting");
...$(this).attr("value","Suggesting");
instead of
Code:
...$(this).parent();
...$(this).addClass("suggesting");
...$(this).val("Suggesting");
use [code]YOUR CODE GOES HERE or burn in Hell
Originally Posted by
Padonak
why do you use constructions like
Code:
...this.parentNode;
...$(this).attr("class","suggesting");
...$(this).attr("value","Suggesting");
instead of
Code:
...$(this).parent();
...$(this).addClass("suggesting");
...$(this).val("Suggesting");
?
Just another way to do it I guess. Either way, changing it doesn't help.
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<!--script type="text/javascript" src="suggestions.js"></script-->
<style>
.suggesting {
width:100px;
background-color:#090;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color: #060;
border-style:solid;
text-align:center;
}
.unsuggest {
width:100px;
background-color:#F00;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color:#C00;
border-style:solid;
text-align:center;
}
.suggest {
width:100px;
background-color:#663366;
border-width:0px;
color:#FFF;
height:30px;
border-width: 1px;
border-color:#5E005E;
border-style:solid;
text-align:center;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="button"]').mouseover(function(){
if($(this).hasClass('suggesting')){
$(this).removeClass('suggesting');
$(this).addClass('unsuggest');
$(this).val('Unsuggest');
}
});
$('input[type="button"]').mouseout(function(){
if($(this).hasClass('unsuggest')){
$(this).removeClass('unsuggest');
$(this).addClass('suggesting');
$(this).val('Suggesting');
}
});
$('input[type="button"]').click(function(){
switch($(this).val()){
case 'Unsuggest':
$(this).removeClass('unsuggest');
$(this).addClass('suggest');
$(this).val('Suggest');
break;
case 'Suggest':
$(this).removeClass('suggest');
$(this).addClass('suggesting');
$(this).val('Suggesting');
break;
}
});
});
</script>
</head>
<body>
<input name='' type='button' class='suggesting' id="1" value='Suggesting' style='cursor:pointer' />
<input name='' type='button' class='suggest' id="2" value='Suggest' style='cursor:pointer' />
</body>
</html>
use [code]YOUR CODE GOES HERE or burn in Hell
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
?
Originally Posted by Padonak
Bookmarks