0

我有一个过滤器页面，我可以在其中选择一个选项并对其进行概述。

我需要帮助来确定如何存储 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'); 
});

jsFiddle

4

3 回答 3

0

试试这个。你会得到 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');  
    });
});
于 2013-06-19T15:45:48.520 回答
0

你在这里有一小部分问题。没什么大不了的。首先，您li在尝试使用时选择了e.preventDefault. 这不会阻止链接更改页面，因为e.preventDefault它将作用于li，而不是a。下一个问题是它preventDefault是一个函数，但您将它用作变量。请记住使用()方法。最后几个问题我会告诉你。

问题代码

//  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;
})

工作示例

建议的解决方案

另一方面，您可以使click事件对 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
})

工作示例

于 2013-06-19T15:48:15.220 回答
0

您不需要存储 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');    
});
于 2013-06-19T15:47:16.180 回答