jquery - URL を保存/追跡し、選択内容に基づいて送信する方法

Question

オプションを選択してアウトライン化できるフィルター ページがあります。

隅にあるチェックボックスが選択されるまで、実際にそのページに移動せずに URL パスを保存する方法を理解するのに助けが必要です。

HTML

<ul>
    <li class="media-select-option" id="media-all"><a href="media/latest/news/">All</a></li>
    <li class="media-select-option" id="media-photos"><a href="media/latest/photos/news/">Photos</a></li>
    <li class="media-select-option" id="media-videos"><a href="media/latest/videos/news/">Videos</a></li>
</ul>

CSS

.overlaymedia {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
    background-color: #000;
    z-index: 500;
    top: 0;
    display: none;
    padding: 25px 0 0 0;
}
.overlaymedia.active {
    display: block;
    overflow-y: hidden;
}
.m-overlay-close-btn:before { 
    content: ''; 
    background: url('/static/images/close2x.png') 0 0 no-repeat;
    width: 20px;
    height: 50px;
    background-size: 50px 50px;
    padding-left: 35px;
    position: fixed;
    font: 100 12px helvetica, arial, sans-serif;
    text-transform: none;
    background-color: #333;
    right: 0px;
}
.m-overlay-close-btn.checked:before {
    content: '';
    background: url('/static/images/icon-accept2x.png') 5px 5px no-repeat;
    width: 20px;
    height: 50px;
    background-size: 40px 40px;
    padding-left: 35px;
    position: absolute;
    font: 100 12px helvetica, arial, sans-serif;
    text-transform: none;
    background-color: #333;
}
.m-overlay-close-btn {
    position: fixed;
    height:50px;
    width:50px;
    /*background: rgba(255,255,255, .13) url('/static/images/close.png') 50% 50% no-repeat;*/
    top:0;
    right:0;
    z-index:100;
}
.m-close-main-nav, .m-overlay-close-btn.bottom {
    width: 30px;
    height: 20px;
    /*background: url('/static/images/overlay-close-btn.png') 0 0 no-repeat;*/
    background-size: 18px 18px;
    padding-left: 25px;
    color: #333;
    font: 100 12px helvetica, arial, sans-serif;
    text-transform: none;
}
.media-select-option {
    border: solid 2px #000;
}
.selected {
    border: solid 2px rgb(102, 102, 102);
    color: rgb(94, 161, 252);
}

JS

$('.media-select-option').click(function(e) {
    e.preventDefault;
    $('.selected').removeClass('selected');
    $(this).addClass('selected')
    $('.m-overlay-close-btn').addClass('checked'); 
});

jsフィドル

Answer 1

これを試してみてください.URLを取得し、リダイレクトを防ぎます

$(function() {
    $('.media-select-option a').click(function(e) {
        e.preventDefault(); //prevent from redirecting
        alert($(this).attr('href')); //get the url
        $('.selected').removeClass('selected');
        $(this).addClass('selected')
        $('.m-overlay-close-btn').addClass('checked');  
    });
});

Answer 2

URL を保存する必要はありません。「選択した」クラス名で取得できます。チェックボックスのIDがmyCbの場合、次のことができます：

$('.media-select-option').click(function(e){
    e.preventDefault();
    $('.selected').removeClass('selected');
    $(this).addClass('selected')
    $('.m-overlay-close-btn').addClass('checked'); 
});
$('#myCb').click(function(e){
    document.location=$('.selected').children('a').attr('href');    
});

Answer 3

ここには小さな問題の集合があります。主要なものは何もありません。まず、liを使おうとすると を選択していますe.preventDefault。はではなくにe.preventDefault作用するため、これはリンクがページを変更するのを妨げません。次の問題は、これは関数ですが、変数として使用していることです。メソッドで使用することを忘れないでください。最後のいくつかの問題を紹介します。liapreventDefault()

問題コード

//  your first problem is here, this selector grabs a "li" not an "a" tag
$('.media-select-option').click(function(e) {
    //  thus, the following will not prevent anything and the link will still follow
    e.preventDefault;
    //  Second, preventDefault is a method, this requires "()" at the end of it
    $('.selected').removeClass('selected');
    //  if you want this added to the "li",
    //      then you'll need to change selector here,
    //          when you change main selector
    $(this).addClass('selected')
    $('.m-overlay-close-btn').addClass('checked'); 
});

私が提案するソリューションは、ページの読み込み後に追加される可能性のある動的リンクに備えるだけでなく、フォローするのもはるかに簡単になります。そのようです：

解決策

//  the selector i use grabs the link itself
$(document).on("click", ".media-select-option a", function(e) {
    e.preventDefault(); // prevent link from changing page
    var $this = $(this),    //  simple variable to constantly refer to this "A" tag link
        li = $this.closest("li").addClass("selected"),  //  get the parent "LI" this "link" belongs too
        href = $this.attr("href");  //  grab URL of link in case you need it later in function
    $(".selected").not(li).removeClass("selected"); //  not(li) will ensure it only removes it from other links
    $('.m-overlay-close-btn').addClass('checked');
    //  if you wanted to change the page now you could do something like:
    //  location.href = href;
})

実施例

---

推奨される解決策

別のメモとして、clickevent を parentLIと child の両方で利用できるようにすることもできますA。e.target.tagNameどのアイテムが呼び出されているかを判断するために使用します。次のように簡単です。

//  this selector grabs both links and their parents
$(document).on("click", ".media-select-option, .media-select-option a", function(e) {
    e.preventDefault(); //  prevent links from going
    e.stopPropagation();    //  preent click on both link and li, only one click needs processing

    //  establish usable variables
    var $a, $href, $li;
    //  set variables based on which item is being clicked
    switch(e.target.tagName){
        case "A":
            $a = $(this);
            $li = $a.closest("li").addClass("selected");
            break;
        case "LI":
            $li = $(this).addClass("selected");
            $a = $li.children("a");
            break;
    }
    //  Here you have your link!
    $href = $a.attr("href");  //  put this variable where you want

    $(".selected").not($li).removeClass("selected");    //  not(li) will ensure it only removes it from other links
    $('.m-overlay-close-btn').addClass('checked');  //  your old call, not sure what this is for
})

実施例