个人中心
gpt4 book ai didi

jQuery 按钮 : "like this"/"dislike this" - Hide all liked/hide all disliked

转载 作者：行者123 更新时间：2023-12-01 01:28:24 26 4
gpt4 key购买 nike

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

<小时/>

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

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

最佳答案

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

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

这是我在 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 按钮 : "like this"/"dislike this" - Hide all liked/hide all disliked，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7182830/

26 4 0
文章推荐： jquery - 不安全的 JavaScript 尝试使用 URL 访问框架。它是本地的
文章推荐： jquery - MVC3 Razor/JQuery 客户端验证不起作用
文章推荐： visual-studio - 使用 Visual Studio Web 安装项目在两个不同的虚拟目录中安装两个网站
文章推荐： jquery - jQuery 克隆函数后更新子元素的属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com