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

发布于 2024-12-01 09:54:43 字数 4171 浏览 0 评论 0原文

好的，我正在尝试对我发现的网站上的一项功能进行逆向工程 - 网站管理员没有回复我。有问题的网站是 http://www.win-free-stuff.ca/new-比赛，特别是我正在尝试构建网站的“显示已输入”和“显示不感兴趣”按钮，这些按钮与每个帖子/比赛旁边的复选标记和 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 上查看我整理的内容。

我实际上已经找到了可以实现我想要的功能的系统。但是，我无法让复选框独立于单选按钮工作。实际上，选中该框会将单选按钮切换为“打开”。我希望单选按钮保留在用户想要的位置，并且在选中该框时，仅当单选按钮处于打开状态时才会显示该消息。如果无线电处于关闭状态，则选中该框不会产生任何结果。

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洒一地阳光 2024-12-08 09:54:43

我以前做过类似的事情来过滤内容（推文，就像它一样） - 这里：http://dci。 uk.net/ - 使用将过滤器应用于推文，它基本上对内容进行各种分析并删除多余的内容。

无论如何 - 只要您在博客中拥有正确的标记，在博客中实现此功能的逻辑就非常简单。

这是我在 10 分钟内在 mootools 中整理的内容：

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

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

回复收藏 0 原文