Кнопки jQuery: нравится / не нравится - скрыть все понравившиеся / скрыть все не понравившиеся

Хорошо, я пытаюсь реконструировать функцию на веб-сайте, который я нашел - веб-мастер мне не отвечает. Речь идет о сайте http://www.win-free-stuff.ca/new-contests и, в частности, я пытаюсь создать кнопки «Показать введенные» и «Показать не заинтересованных» на сайте, которые работают в тандеме с галочками и крестиками рядом с каждым сообщением / конкурсом.

Я понял, что он использует для этого либо 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>

button animation jquery mootools
person Sweepster    schedule 24.08.2011    source источник
comment
Скрыть этот текст сообщения используется scriptaculous, можно ли сделать то, что я хочу?   -  person Sweepster    schedule 25.08.2011
comment
для более удобочитаемого кода вы должны сделать для них отступ четырьмя пробелами, а не заключать их в `   -  person Umur Kontacı    schedule 25.08.2011
comment
Похоже, что у as есть свои обработчики событий щелчка, подключенные через mootools.   -  person Jacob    schedule 25.08.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я делал подобные вещи раньше для фильтрации контента (как бы твитов) - здесь: http://dci.uk.net/ - используйте apply filters to tweets, который в основном выполняет различный анализ содержания и удаляет излишки.

в любом случае - довольно просто реализовать логику, которая может удовлетворить эту функцию в блоге, если у вас есть правильная разметка в блоге.

вот что я собрал за 10 минут в mootools:

http://jsfiddle.net/dimitar/XuBKZ/ - имейте в виду из-за ошибки фреймворка с Получатели свойств в ie6 / 7/8, это не будет работать с 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

person Dimitar Christoff    schedule 03.02.2012

arrow_upward
1
arrow_downward

Я бы рекомендовал изучить событие jQuery .change (), чтобы использовать его вместо onclick. Событие изменения будет запускаться всякий раз, когда пользователь выбирает новую опцию радио.

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

person cockroachbill    schedule 02.02.2012