Кнопки jQuery: «Мне нравится» / «Не нравится это» - Скрыть все понравившиеся / скрыть все не понравившиеся - PullRequest
Новая
       21

Кнопки jQuery: «Мне нравится» / «Не нравится это» - Скрыть все понравившиеся / скрыть все не понравившиеся

3 голосов
/ 25 августа 2011

Хорошо, я пытаюсь провести обратный инжиниринг функции на найденном веб-сайте - веб-мастер не отвечает мне.Рассматриваемый сайт - 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

Я действительно нашел эту систему, которая может делать то, что я хочу.Однако я не могу заставить флажок работать независимо от переключателей.Как есть, флажок переключает переключатель в положение «Вкл.».Я хочу, чтобы радио-кнопка оставалась там, где этого хочет пользователь, и при установке флажка только если радио включено, сообщение отображается.Если радио выключено, установка флажка не должна привести ни к чему. 

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

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

Я уже делал подобные вещи, прежде чем делать фильтрацию контента (как бы твиты) - здесь: 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 преобразования

1 голос
/ 02 февраля 2012

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...