一种JavaScript / jQuery函数在Wordpress中不起作用

Question

So, I'm trying to use Wordpress for the "News" page on my website, but one of my js functions is just not working in Wordpress (works fine without wp).

Here is the HTML I've put in the Wordpress posts template:

<div class="posts">
    <h2>POST SUMMARY</h2>
    <a class="readmore" href="javascript:;">Read More</a>
    <div class="border"></div>
    <p>POST CONTENT</p> 
    <center><iframe>iFRAME CONTENT</iframe></center>
    <a class="readless" href="javascript:;">Read Less</a>
</div>

These functions are working fine:

// Showing only post preview on page load
$('.posts').not(':first').css({
    'height': '110px',
    'overflow': 'hidden'
});

// Hiding a.readmore when post is expanded
$('.readmore:first').addClass('full');

// Expanding post
$('.readmore').click(function(){
    $(this).addClass('full');
    $(this).closest('.posts').css({
        'height': '',
        'overflow': ''
    });
});

This is the problem function ( .readless collapses the post as it should, but .readmore remains hidden):

// Minimizing post
$('.readless').click(function(){
    var clicked = $(this);
    clicked.closest('.posts').css({'height': '110px','overflow': 'hidden'});
    clicked.closest('.posts').children('.readmore').removeClass('full');
});

Oh, and the CSS, in case it's not obvious:

a.readmore.full {
    display: none;
}

My only thought was that .posts already exists in wp's HTML, so I tried giving it a name attribute and targeting it (and its children) that way, but to no avail.

Any help and/or suggestion is, as always, very much appreciated.

Answer 1

You can troubleshoot Javascript by using the console in your browser. For example, you can try typing these commands to the console:

console.log( jQuery('.readless') );
console.log( jQuery('.readless').closest('.posts') );
console.log( jQuery('.readless').closest('.posts').children('.readmore') );

The output will tell you if jQuery is matching your elements correctly.

Edit : Turns out the OP was posting the code through the Rich Editor, and the A elements got wrapped with P elements. In this case, the a.readmore element was no longer a child of div.posts , but a descendant (a grandchild). Therefore, the jQuery selector is:

jQuery('.readless').closest('.posts').find('.readmore');

If you have difficulty matching the correct elements, always check your DOM using the browser's developer tools such as "inspect element".