jQuery的按鈕：「像這樣」 /「不喜歡這個」 - 隱藏所有喜歡/隱藏所有討厭

好吧，我試圖反向工程網站，我發現了一個特點 - 站長沒有回答我。有問題的網站是http://www.win-free-stuff.ca/new-contests，特別是我想建立進入顯示和顯示沒有哪個亦隨複選標記，X的下一個到每個崗位/較量工作網站的興趣按鈕。jQuery的按鈕：「像這樣」 /「不喜歡這個」 - 隱藏所有喜歡/隱藏所有討厭

我已經想通了，他是使用jQuery的兩種或mootools的做到這一點。我也找到了自己的方式來建立按鈕。我的問題是JavaScript的編碼，以獲得bottons實際功能。

這是我迄今爲止所輸入的隱藏和隱藏所有不感興趣：

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

來源

2011-08-24 Sweepster

「隱藏這篇文章」文本是使用scriptaculous，可以做到我想要的嗎？ – Sweepster

以獲得更多可讀代碼，您應該將它們縮進四個空格，而不是用「'」將它們包裝起來。 –

它看起來像'a's通過mootools連接了它們的單擊事件處理程序。 – Jacob

我已經做了類似的東西之前做的內容進行篩選（微博，因爲它是） - 在這裏：http://dci.uk.net/ - 使用apply filters to tweets，基本上不會對內容的各種分析和消除什麼是過剩。

無論如何 - 只要您在博客中擁有正確的標記，在博客中完成可以滿足此功能的邏輯非常簡單。

這裏的東西我放在一起在10分鐘中的mootools：

http://jsfiddle.net/dimitar/XuBKZ/ - 牢記由於在IE6屬性獲取一個框架的bug/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變換

來源

2012-02-03 13:55:32

我會建議尋找到jQuery的.change（）事件，而不是使用的onclick。只要用戶選擇新的無線電選項，就會觸發更改事件。

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

來源

2012-02-02 18:50:32 cockroachbill

jQuery的按鈕：「像這樣」 /「不喜歡這個」 - 隱藏所有喜歡/隱藏所有討厭

回答

相關問題