jQuery buttons: "like this"/"dislike this" - Hide all liked/hide all disliked
Okay, I'm trying to reverse engineer a feature on a website I found - the webmaster is not replying to me. The site in question is http://www.win-free-stuff.ca/new-contests and in particular I am trying to build the Show Entered and Show not interested buttons of the site which work in tandem with the checkmarks and X's next to each post/contest.
I have figured out that he is using either jQuery or mootools to accomplish this. I've also found my way into his css to build the buttons. My problem is in the coding of the javascript to get the bottons to actually function.
This is what I have so far for the Hide entered and Hide all not interested:
<form id="compFilterForm" action="http://www.win-free-stuff.ca/new-contests" method="POST">
<div id="filterInputs">
<input id="cmFilterDisplayOption1" class="cmFilterDisplay hidden" type="checkbox" name="cm_filter_display[]" value="entered" checked />
<input id="cmFilterDisplayOption2" class="cmFilterDisplay hidden" type="checkbox" name="cm_filter_display[]" value="notInterested" checked />
<a id="filterEntered" class="filterEntered filterEnteredChked" href="#" title="Click here to show the competitions you’ve marked as entered" target="_self"></a>
<a id="filterNotInterested" class="filterNotInterested filterNotInterestedChked" href="#" title="Click here to show the competitions you’ve marked as not interested" target="_self"></a>
<a id="compFilterHelp" class="help helpAlt" href="#" title="Help" target="_self"></a>
</div>
</form>
And this is the entered/not interested for the individual posts:
<form id="compListing" class="preferences" action="" method="POST">
<div class="competitionBox">
<div class="compPref">
<a class="updatePrefEntered entered" href="#" title="Mark as Entered" target="_self">
<input class="hidden" type="text" name="cm_user_pref_tick" value="0" />
</a>
<a class="updatePrefNotInterested notInterested" href="#" title="Mark as Not Interested" target="_self">
<input class="hidden" type="text" name="cm_user_pref_cross" value="0" />
</a>
</div>
</div>
</form>
So is there a $_GET function I should be calling? Is it jQuery or is it Mootools? Can someone at least point me in the right direction if you can't help me here? Ideally this whole thing must also remember the entered/not interested every time the user returns as well, would this require cookies?
The goal is to allow users to see only posts they like, only posts they dislike (they might change their minds), see only posts they haven't decided on, or see everything.
I realize I may be in over my head but I kow someone here can point me in the right direction. Thanks.
You can see what I've put together at www.mcfilmmakers.com
I have actually found this system that could do what I want. However I cannot get the check box to work independently of the radio buttons. As it is, checking the box switches the radio button to On. I want to radio button to remain where the user wants it and when checking the box only IF radio is On does the message show. If the radio is Off, checking the box should result in nothing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unhi开发者_如何转开发de on checkboxes/radio buttons</title>
<script type="text/javascript">
function toggleLayer(val)
{
if(val == 'on' || val === true)
{
document.getElementById('a1').checked = true;
document.getElementById('layer1').style.display = 'block';
}
else if(val == 'off' || val === false)
{
document.getElementById('a2').checked = true;
document.getElementById('layer1').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Unhide Layer Form</legend>
<ul>
<li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li>
<li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /></li>
</ul>
</fieldset>
</form>
<div id="layer1">You can now see this.</div>
</body>
</html>
I have done stuff like that before to do with filtering content (tweets, as it were) - here: http://dci.uk.net/ - use the apply filters to tweets, which basically does various analysis on the content and removes what is surplus.
anyway - it's quite simple to do logic that can cater for this func in a blog as long as you have the right markup in a blog.
here's something I put together in 10 mins in mootools:
http://jsfiddle.net/dimitar/XuBKZ/ - keep in mind due to a framework bug with property getters in ie6/7/8, this wont work with mootools 1.4.3 so use 1.4.2 or wait for 1.4.4 - which comes out this week (hopefully).
this is just to get you started, it needs to be refactored and written so it's reusable etc and has options, api etc - but you get the idea - i suppose you really are after somebody writing your jquery code anyway.
(function() {
var ns = {
likePost: [],
dislikePost: []
}, mapper = {
likePost: "like",
dislikePost: "dislike"
}, content = document.id("content"),
posts = content.getElements("div.post");
content.addEvent("click:relay(a.votePost)", function(e) {
e.stop();
var other = "likePost", action = this.hasClass("likePost") ? "likePost" : "dislikePost";
if (other == action)
other = "dislikePost";
var parent = this.getParent("div.post"), id = parent.retrieve("id") || parent.get("data-id");
parent.store("id", id);
// can only be liked or disliked at any time. second click undoes.
if (parent.hasClass(mapper[action])) {
parent.removeClass(mapper[action]);
ns[action].erase(id);
return;
}
ns[action].push(id);
ns[other].erase(id);
parent.addClass(mapper[action]);
parent.removeClass(mapper[other]);
});
document.id("controls").addEvent("click:relay(a)", function(e) {
switch(this.get("class")) {
case "likePost":
posts.each(function(el) {
if (!!~ns.likePost.indexOf(el.retrieve("id")))
el.removeClass("hide");
else
el.addClass("hide");
});
break;
case "dislikePost":
posts.each(function(el) {
if (!!~ns.dislikePost.indexOf(el.retrieve("id")))
el.removeClass("hide");
else
el.addClass("hide");
});
break;
default:
// all
posts.removeClass("hide");
}
});
})();
this caters for logic anyway - what / how you animate posts in/out is up to you. you can even just do css transforms
I would recommend looking into the jQuery .change() event to use instead of onclick. The change event will be triggered whenever the user selects a new radio option.
http://api.jquery.com/change/
加载中,请稍侯......
精彩评论