dongshan4549
dongshan4549
2017-04-06 04:34

在PHP中动态更改悬停时另一个元素的内容

已采纳

I know there are answers out there showing how to use java script/jquery etc to achieve the titled behavior statically. The problem arises when I don't always have the exact id of the element.Since, I m dynamically making a table from the posts(posts from wordpress, but this question doesn't address any plugin or wordpress related query whatsoever, I did this little gig myself without some special pluginor help from wordpress other than posts themselves).

So now what I did is This. I made a table and called table columns using html n php while extracting data from posts.

What I want to do is, whenever I hover on view details, owner name and owner contact should change value from another string I have.

Now, my question here is I can't give unique id to each element, so I can't use the normal id based jquery and set hover actions to get my task done.I thought of using css selectors ( + , ~ , > etc) but I was unable to change content using style's content property.So if any optimal solution to this problem exists, that'd be very helpful. Thanks in advance & Regards.

My code(If needed at all) -

<?php
$string = get_post_meta( $post->ID,'property_owner_name',true);
 $tring = get_post_meta( $post->ID,'property_owner_alternate_contact',true);
 $fring=substr($tring, 0, -5)."XXXXXXXXXX"; 

 $owner_name;
 $owner_contact;
 if((current_user_can('editor')||current_user_can('administrator')))
$owner_name =    $string;
else
$owner_name ='XXXXXX'; // String to change to
    
     if((current_user_can('editor')||current_user_can('administrator')))
$owner_contact =     $fring;
else
$owner_contact =substr($fring,0,10);  //String to change to
 
?>


 
<tr>
    
<td class="text-left"><?php echo inspiry_get_property_location( $post->ID );   ?></td>
<td class="text-left"><?php echo inspiry_get_property_status( $post->ID );   ?></td>

<td class="text-left hide2"><?php echo inspiry_get_property_types( $post->ID ); ?></td>

<td class="text-left hide1"><?php the_title(); ?></td>

<td class="text-left hide3" id="a">XXXXXX</td>

<td class="text-left hide3" id="b"> XXXXXXXXXX</td>

<td class="text-right"><a href="<?php the_permalink(); ?>" class="btn real-btn"style="background:#68cfef; color:#fff; min-width:115px;" >VIEW DETAILS</a></td>

</tr>
  
                                

Update (Codes of file actually calling this template in a loop ) :

<div id="home-properties" class="property-items-container clearfix">
                                    <?php
                                    /* List of Properties on Homepage */
                                    $number_of_properties = intval( get_option('theme_properties_on_home') );
                                    if(!$number_of_properties){
                                        $number_of_properties = 4;
                                    }

                                    if ( is_front_page()  ) {
                                        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
                                    }

                                    $home_args = array(
                                        'post_type' => 'property',
                                        'posts_per_page' => $number_of_properties,
                                        'paged' => $paged
                                    );

                                    /* Modify home query arguments based on theme options - related filters resides in functions.php */
                                    $home_args = apply_filters( 'real_homes_homepage_properties', $home_args );

                                    /* Sort Properties Based on Theme Option Selection */
                                    $sorty_by = get_option('theme_sorty_by');
                                    if ( ! empty( $sorty_by ) ) {
                                        if ( $sorty_by == 'low-to-high' ) {
                                            $home_args[ 'orderby' ]  = 'meta_value_num';
                                            $home_args[ 'meta_key' ] = 'REAL_HOMES_property_price';
                                            $home_args[ 'order' ]    = 'ASC';
                                        } elseif ( $sorty_by == 'high-to-low' ) {
                                            $home_args[ 'orderby' ]  = 'meta_value_num';
                                            $home_args[ 'meta_key' ] = 'REAL_HOMES_property_price';
                                            $home_args[ 'order' ]    = 'DESC';
                                        } elseif ( $sorty_by == 'random' ) {
                                            $home_args[ 'orderby' ] = 'rand';
                                        }
                                    }
                                    $home_properties_query = new WP_Query( $home_args );

                                    /* Homepage Properties Loop */
                                    if ( $home_properties_query->have_posts() ) :

                                        $post_count = 0;?>
                                            
                                        <table  width=100% id="design2" class="table-fill" border=0>
                                        
                                        <tr>
                                        <th class="text-center">Location</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center hide2">Type</th>
                                        <th class="text-center hide1">Description</th>
                                        <th class="text-center hide3">Owner's Name</th>
                                        <th class="text-center hide3">Owner's Number</th>
                                        <th class="text-center"></th>
                                        </tr>
                                        <tbody class="table-hover">
                                        <?php
                                        while ( $home_properties_query->have_posts() ) :

                                            $home_properties_query->the_post();

                                            /* Display Property for Home Page */
                                            get_template_part('template-parts/property-for-home');

                                            /* To output clearfix after every 2 properties */
                                            $post_count++;                                       
                                                /*echo '<div class="clearfix"></div>';*/
                                          
                                            ?>
                                            <?php

                                        endwhile;
                                        echo '<tbody></table>';

                                    else:
                                        ?>
                                        <div class="alert-wrapper">
                                            <h4><?php _e('No Properties Found!', 'framework') ?></h4>
                                        </div>
                                        <?php
                                    endif;
                                    ?>

                                </div>

Yup its frm a theme I bought and they dnt support customization obviously. Actually I had already tried using jquery giving the columns i need an id which changes based on $post_count like 'a1' 'a2' 'a3', 'b1' 'b2' 'b3' etc but I dont really know where I messed it up in jquery( I hacked some examples into my code from stackoverflow ), put them in the looping template and console was giving me some 'uncaughtreferenceerrors' & some other things next time(new at java n stuff)(In overall, i couldn't hack it in correctly). So, if u guyz cn come up with some stuff I could use that'd be very helpful...doesn't matter if its done by css, js or wtevr. Thanks in Advance

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duanqiao8925 duanqiao8925 4年前

    Got it done using Post id as unique element and was having problems because wordpress doesn't use '$' in js,instead use 'jquery' term for doing work.Thanks fr looking into the question anyway.Here's my edited template code, If ever required in future.

    <?php
    $string = get_post_meta( $post->ID,'inspiry_property_owner_name',true);
     $tring = get_post_meta( $post->ID,'inspiry_property_owner_alternate_contact',true);
     $fring=substr($tring, 0, -5)."XXXXXXXXXX"; 
    
     $owner_name;
     $owner_contact;
     if((current_user_can('editor')||current_user_can('administrator')))
    $owner_name =    $string;
    else
    $owner_name ='XXXXXX';
        
         if((current_user_can('editor')||current_user_can('administrator')))
    $owner_contact =     $fring;
    else
    $owner_contact =substr($fring,0,10);
     
    
      $id = get_the_ID();
     $uniqueid = 'infohide'.$id;
     $uniqueidz = 'infounhide'.$id; 
      
     ?>
     
     <style>
    .<?php echo $uniqueidz; ?>{
        display:none;
    }
    </style>
    
        <tr>
    <td class="text-left"><?php echo inspiry_get_property_location( $post->ID );   ?></td>
    <td class="text-left"><?php echo inspiry_get_property_status( $post->ID );   ?></td>
    <td class="text-left hide2"><?php echo inspiry_get_property_types( $post->ID ); ?></td>
    <td class="text-left hide1"><?php the_title(); ?></td>
      
      
    <td class="text-left hide3" >
    <div class="<?php echo $uniqueid; ?>">XXXXXX</div>
    <div class="<?php echo $uniqueidz; ?>"> <?php echo $owner_name; ?></div>
    </td>
    
    
    <td class="text-left hide3" >
    <div class="<?php echo $uniqueid; ?>">XXXXXXXXXX </div>
    <div class="<?php echo $uniqueidz; ?>"> <?php echo $owner_contact; ?></div>
    </td>
    
    
    <td class="text-right">
    
    <a href="<?php the_permalink(); ?>" class="btn real-btn"style="background:#68cfef; color:#fff; min-width:115px;" onmouseover="bigImg<?php echo $uniqueid; ?>()" onmouseout="normalImg<?php echo $uniqueid; ?>()">VIEW DETAILS</a>
    </td>
    
    
    
    <!--td><?php /*$reflFunc = new ReflectionFunction('get_post_meta');
    print $reflFunc->getFileName() . ':' . $reflFunc->getStartLine(); */ ?> </td-->
      
    
      <script>
      function bigImg<?php echo $uniqueid; ?>() {
      jQuery('.<?php echo $uniqueid; ?>').css('display', 'none');
      jQuery('.<?php echo $uniqueidz; ?>').css('display', 'block');
          
    }
    function normalImg<?php echo $uniqueid; ?>() {
      jQuery('.<?php echo $uniqueidz; ?>').css('display', 'none');
      jQuery('.<?php echo $uniqueid; ?>').css('display', 'block');
    }
    
    
      
      </script>
                                    
                                    
                                      </tr>

    </div>
    
    点赞 评论 复制链接分享

相关推荐