Question

我有这个脚本:(动态创建<li>元素）

echo '<div class="pagination"><ul>' . "\n";

// Previous Post Link.
if ( get_previous_posts_link() )
{
    printf( '<li>%s</li>' . "\n", get_previous_posts_link('Prev') );
}

// Link to first page, plus ellipses if necessary.
if ( ! in_array( 1, $links ) )
{
    $class = 1 == $paged ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
    if ( ! in_array( 2, $links ) )
    {
        echo '<br><br>';
    }
}

// Link to current page, plus 2 pages in either direction if necessary.
sort( $links );
foreach ( (array) $links as $link )
{
    $class = $paged == $link ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}

// Link to last page, plus ellipses if necessary.
if ( ! in_array( $max, $links ) )
{
    if ( ! in_array( $max - 1, $links ) )
    {
        echo '<br><br>' . "\n";
    }
    $class = $paged == $max ? ' class="active"' : '';
    printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}

// Next Post Link.
if ( get_next_posts_link() )
{
    printf( '<li>%s</li>' . "\n", get_next_posts_link('Next') );
}

echo '</ul></div>' . "\n";

我想在点击<li>时禁用<li>元素，直到该功能完成其工作。这是我的点击事件：

jQuery('.pagination > ul > li > a').live('click', function(e)
{
   // disable <li> elements.

    jQuery('.postMain').load(link + ' .postMain', function()
    {
        // enable <li> elements.
     });
});

我使用attr("disabled", "disabled")但它没有用。在链接加载之前，我该怎么做才能禁用所有<li>元素。任何帮助将不胜感激。

Answer 1

默认属性已禁用不适用于 li 元素。

相反，我们需要为此做一个黑客攻击。即，在列表元素上应用叠加。因此用户无法选择li元素上的任何元素。

你可以通过导航到下面的代码来看到恶魔......

<强> HTML

<ul>
   <li>
     <a href="google.com">Google</a>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue ipsum quam, nec blandit sapien eleifend eget. Cras cursus ullamcorper risus nec rutrum. Praesent lobortis nibh turpis. Curabitur eleifend leo ultricies efficitur dignissim. Aliquam eget dapibus nisi. Fusce dictum laoreet enim, nec blandit arcu feugiat sagittis. Mauris non dolor nec dui luctus ornare. Vestibulum pulvinar metus diam, eu vulputate leo suscipit ut. Donec eget consequat sem, et finibus lorem.</p>    
  </li>
</ul>
<input type="button" id="btnReset" value="Reset" />

<强> CSS

.overlay {
  opacity: 0;
  position: absolute;
}

li {
  list-style: none;
  background: blue;
  padding: 10px;
  color: #fff;
}

a {
  color: #fff;
}

<强>的jQuery

$('li').click(function(){
    var list_height = $(this).height();
    var list_width = $(this).width();
    var list_position = $(this).position();
    $('body').append('<div class="overlay"></div>');
    $(".overlay").css({'height': list_height,'width': list_width,'left': list_position.left, 'top': list_position.top});
});

$("#btnReset").click(function(){
    $('.overlay').remove();
});

http://jsfiddle.net/4x76amag/2/

在click - jquery </li>上禁用动态创建的<li>元素

1 个答案: