javascript disabling a div or a link? (for a 5-star rating system)
Basically, I've created a 5-star rating system. Pretty typical. It shows how many stars other people have given the item, and then when a user hovers over the stars, it lights up x number of stars based on how many they're over.
It's all run by AJAX. They click 5 stars it automatically adds their 5-star rating to the group. The problem is that after they rate it I want to turn the system off, but I can't seem to be able to do that.
I've tried everything I can think of. I've tried using element.disable for the a hrefs and for the div, but it still lets them vote away, over and o开发者_StackOverflow中文版ver again, at least in firefox.... Can anyone help me out with a method to simply "freeze" the stars on what the user voted?? If I need to add code, that's cool! I figured it probably wasn't necessary in this situation!
I probably should have added. For complicated reasons, this is straight js, not jquery or anything else.
It really depends on how you've implemented your code, but say you have some links:
<div id="star-1" class="rate-it"><!-- HTML markup for your 5 stars --></div>
<div id="star-2" class="rate-it"><!-- HTML markup for your 5 stars --></div>
and have dynamically added the onclick to the base div, then in the called function you would do something like this:
function rateStars() {
if(!this.rated) {
this.rated = true;
...other code...
}
}
it kinda depends what is in scope, but this would work if the HTML element is the scope.
If you've created this code, you should have created some event handlers for mouseovers and clicks. Simply eat those events if you detect that the user has previously performed the action.
The following defines two elements, both of which have click handlers. But you can keep clicking the first one to get an alert box, while the second one disables its handler on the first click, so it goes 'silent' on further clicks.
<span onclick='alert("Element 1")'>Button1</span><br/>
<span onclick='alert("Element 2");this.onclick=""'>Button2</span>
You wouldn't want to use this in production code, but it's a short example that illustrates the kind of thing you should be doing.
If you use a jquery plugin, like this one that relies on css styles and standard html controls. You can control the 'freezing' by simply changing the css styles.
if you were using jquery (and I recommend it) this would be pretty easy
say you had some html like this
<div id="star-1" class="rate-it">...</div>
<div id="star-2" class="rate-it">...</div>
then your js with jquery
$(document).ready(function () {
$(".rate-it").click(function () {
// do your ajax calls, this.id => star-1, star-2, etc... depending on the clicked item
$(".rate-it").unbind("click"); // remove the handlers
});
});
This is a workaround I came up with, hope it helps you:
<html>
<head>
<body>
<a href="#" onclick="mumboJumbo(this); return false;">Rate me!</a>
<script>
function mumboJumbo(me){
var myDad = me.parentNode;
var mySis = document.createElement('span');
mySis.setAttribute('style', 'color: grey;');
mySis.innerHTML = me.innerHTML;
myDad.removeChild(me);
myDad.appendChild(mySis);
};
</script>
</body>
</html>
All it does is replace the a with a span (as you said you where using a's).
加载中,请稍侯......
精彩评论