Question

好的，我正在尝试对我发现的网站上的某个功能进行反向工程 - 网站站长没有回复我。有问题的网站是http://www.win-free-stuff.ca/new-contests，特别是我正在尝试构建Show Entered和Show不感兴趣的网站按钮，它们与每个帖子/比赛旁边的复选标记和X一起工作。

我已经发现他正在使用jQuery或mootools来实现这一目标。我也找到了进入他的CSS的方法来构建按钮。我的问题在于javascript的编码以使底部实际运行。

这是我迄今为止所输入的隐藏和隐藏所有不感兴趣的内容：

<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>

这是对个别帖子输入/不感兴趣：

<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>

那么我应该调用$ _GET函数吗？是jQuery还是Mootools？如果你不能帮助我，有人至少能指出我正确的方向吗？理想情况下，每次用户返回时，整个事情也必须记住输入/不感兴趣，这是否需要cookie？

目标是让用户只看到他们喜欢的帖子，只看到他们不喜欢的帖子（他们可能改变主意），只查看他们尚未决定的帖子，或查看所有帖子。

我意识到我可能会在脑海中，但我知道有人在这里可以指出我正确的方向。感谢。

你可以在www.mcfilmmakers.com看到我把它放在一起

我实际上发现这个系统可以做我想要的。但是，我无法使复选框独立于单选按钮。实际上，选中此框会将单选按钮切换为开。我希望单选按钮保留在用户想要的位置，并且当选中此框时，只有IF收音机打开才会显示消息。如果收音机处于关闭状态，选中该复选框将不会产生任何结果。

<!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>Unhide 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>

Answer 1

我建议使用jQuery .change（）事件来代替onclick。只要用户选择新的无线电选项，就会触发更改事件。

http://api.jquery.com/change/

Answer 2

我之前做了类似的事情来过滤内容（推文，就像这样） - 这里：http://dci.uk.net/ - 使用apply filters to tweets，它基本上对内容做了各种分析并删除了什么是盈余。

无论如何 - 只要你在博客中有正确的标记，做一个可以在博客中满足这个功能的逻辑非常简单。

这是我用mootools在10分钟内放在一起的东西：

http://jsfiddle.net/dimitar/XuBKZ/ - 请记住，由于ie6 / 7/8中属性getter的框架错误，这不适用于mootools 1.4.3所以使用1.4.2或等待1.4.4 - 这就出来了本周（希望如此）。

这只是为了让你开始，它需要重构和编写，所以它可以重复使用等，并有选项，api等 - 但你明白了 - 我想你真的在追问某人编写你的jquery代码。

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


    });

})();

无论如何这都符合逻辑 - 你进/出的动画是什么/如何取决于你。你甚至可以做css变换

jQuery按钮：“喜欢这个”/“不喜欢这个” - 隐藏所有喜欢/隐藏所有不喜欢的东西

2 个答案: