enable jquery click event based on PHP conditions

1 Views

I’m trying to edit a wordpress template for a multi-video page. Each video item can be clicked to play the video, however I want that click event enabled ONLY if a link is defined (in the wordpress shortcodes). You can see an example of the video page here: http://madbunny.us/vixen/demo/all/dark/multi-video/

This is for a portfolio website, so having the image still as an item, but without a video is very important for me, if there is no link.

Read More

UPDATE:
After I tweaked it based on Jay Hewitt’s reply, it does what I want, but it introduced a new problem, it can go to the next video, but won’t go back to the previous video that doesn’t have a url (click event disabled). 

jQuery('.multivideo-center-play-btn, .multivideo-preview').each(function(){
    var _self = jQuery(this);
    _self.bind('click',function(){
        if(_self.parent().find(".hidden-url").text() != ""){
            var $vid = jQuery(this).parent();
            if ($vid.hasClass('active') || isAMobile)playVideo($vid);
            else moveToVideo($vid);    
        }
    });
});
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. What is the $content variable? It looks like it will use that one variable for all bindings.

    If it’s just the URL set in the hidden-url div, then you want to add the binding to each selector meeting your criteria.

    jQuery('.multivideo-center-play-btn, .multivideo-preview').each(function(){
    var _self = jQuery(this);
    var $vid = jQuery(this).parent();
    _self.bind('click',function(){
        if(_self.parent().find(".hidden-url").text() != ""){
            if ($vid.hasClass('active') || isAMobile){
                playVideo($vid);
            } else {
                moveToVideo($vid);
            }
        } else {
            moveToVideo($vid);
        }
    });
});

  2. set variables in php with something like this: 

    <?php
    if( $content ) {
        echo '<script>
                  var multivideo = true;
              </script>';
    }
?>

    The, you can check in your script the defined variable.

    Otherwiese, if you don’t want to define a global variable, you can add data-attribute to the .multivideo-center-play-btn, .multivideo-preview element,
    and check it with
    jQuery( this ).data( 'enabled' )