Question

我有以下代码。此代码来自我的theme-options.php文件。

我仍在努力，并且我开发了这一切。

function social_icons() { 

    $icons = array (
        'facebook'=>__('Facebook','responsivetheme'),
        'google'=>__('Google','responsivetheme'),
        'instagram'=>__('Instagram','responsivetheme'),
        'linkedin'=>__('Linkedin','responsivetheme'),
        'pinterest'=>__('Pinterest','responsivetheme'),
        'rss'=>__('RSS','responsivetheme'),
        'stumbleupon'=>__('Stumbleupon','responsivetheme'),
        'twitter'=>__('Twitter','responsivetheme'),
        'vimeo'=>__('Vimeo',''),
        'youtube'=>__('Youtube','responsivetheme')
        );
    $iconsHover = array (
        'facebook-h'=>__('Facebook','responsivetheme'),
        'google-blank-h'=>__('Google','responsivetheme'),
        'instagram-blank-h'=>__('Instagram','responsivetheme'),
        'linkedin-blank-h'=>__('Linkedin','responsivetheme'),
        'pinterest-h'=>__('Pinterest','responsivetheme'),
        'rss-h'=>__('RSS','responsivetheme'),
        'stumbleupon-blank-h'=>__('Stumbleupon','responsivetheme'),
        'twitter-h'=>__('Twitter','responsivetheme'),
        'vimeo-blank-h'=>__('Vimeo',''),
        'youtube-h'=>__('Youtube','responsivetheme')
        );

    ?>
    <?php
    $theme_options = get_option('new_theme_options',false);
    $theme_values = unserialize($theme_options); 

    $icons_options = get_option('social_settings_responsivetheme_options');
    $icons_values = unserialize($icons_options);
    ?>

    <?php 
    foreach( $icons as $key => $value )  :
    if (!empty ($theme_values[$key])) :
    ?>
        <a href="<?php echo $theme_values[$key];?>" class="<?php echo esc_html( $value )?>"  title="<?php echo esc_html( $value )?>" target="_blank"><img class="" src="<?php echo  template_dir('/icons/'.esc_attr( $key ).'.png');?>" alt="<?php echo esc_html( $value )?>"  width="<?php echo $icons_values['width'];?>" height="<?php echo $icons_values['height'];?>"  /></a>
<?php endif;//END !empty ($theme_values) ?>


<?php foreach ($iconsHover as $key2 => $value2 ): ?>
    <script type="text/javascript">
        $(document).ready(function(){
            var templateDirectory = "<?php echo get_template_directory_uri(); ?>";
            $('.social_icons .<?php echo  esc_html($value2); ?> img').hover(
                function (){
                    $(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key2);    ?>.png');
                },
                function () {
                    $(this).attr('src', templateDirectory + '/icons/<?php echo   esc_attr($key); ?>.png');
                });

                });//END document
    </script>
    <?php   endforeach;//END foreach $iconsHover?>


<?php  endforeach;//END foreach ?>


<?php
}//END social_icons()?>

问题是当我将鼠标悬停在图标上时，悬停img可以正常工作，但是当鼠标移出时，正常的img仍应保留，但它不会。它将所有imgs替换为“youtube-h＆＃39;

怎么做？

Answer 1

抱歉，我的评论不够清楚。

通过将它们置于嵌套循环中，您可以输出所有可能的组合（＆＃39; facebook＆＃39;，＆＃39; facebook-h＆＃39;），＆＃39; facebook＆＃39; ，＆＃39; google-blank-h＆＃39;），（＆＃39; facebook＆＃39;，＆＃39; instagram-blank-h＆＃39;）...（＆＃39; youtube＆＃39; ，＆＃39; vimeo-blank-h＆＃39;），（＆＃39; youtube＆＃39;，＆＃39; youtube-h＆＃39;）。

将它们全部放在一个数组中我的意思是这样的：

$icons = array (
    array(
        'off'   => 'facebook',
        'hover' => 'facebook-h',
        'label' =>__('Facebook','responsivetheme')
    ),
    array(
        'off'   => 'google',
        'hover' => 'google-blank-h',
        'label' =>__('Google','responsivetheme')
    ),
    array(
        'off'   => 'instagram',
        'hover' => 'instagram-blank-h',
        'label' =>__('Instagram','responsivetheme')
    ),
    array(
        'off'   => 'linkedin',
        'hover' => 'linkedin-blank-h',
        'label' =>__('Linkedin','responsivetheme')
    ),
    array(
        'off'   => 'pinterest',
        'hover' => 'pinterest-h',
        'label' =>__('Pinterest','responsivetheme')
    ),
    array(
        'off'   => 'rss',
        'hover' => 'rss-h',
        'label' =>__('RSS','responsivetheme')
    ),
    array(
        'off'   => 'stumbleupon',
        'hover' => 'stumbleupon-blank-h',
        'label' =>__('Stumbleupon','responsivetheme')
    ),
    array(
        'off'   => 'twitter',
        'hover' => 'twitter-h',
        'label' =>__('Twitter','responsivetheme')
    ),
    array(
        'off'   => 'vimeo',
        'hover' => 'vimeo-blank-h',
        'label' =>__('Vimeo','responsivetheme')
    ),
    array(
        'off'   => 'youtube',
        'hover' => 'youtube-h',
        'label' =>__('Youtube','responsivetheme')
    )
);

然后你只需要一个循环，如下所示：

foreach ($icons as $icon) {
}

您可以在其中使用$icon['off']，$icon['hover']和$icon['label']。

如何使用jQuery在WordPress中悬停时更改img srs attr

1 个答案: