How to change img srs attr on hover in WordPress with jQuery

Question

I have following code. This code is from my theme-options.php file.

and I am still working on it and I develop this all.

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()?>

The problem is when I hover on icons the hover img works but when on mouse out the normal img should still remains, it doesn't. It replaces all imgs to 'youtube-h' .

How to do that?

Answer 1

Sorry my comment wasn't clear enough.

By putting them in nested loops, you're outputting every possible combination ('facebook', 'facebook-h'), ('facebook', 'google-blank-h'), ('facebook', 'instagram-blank-h')... ('youtube', 'vimeo-blank-h'), ('youtube', 'youtube-h').

What I meant by putting them all in one array was something like this:

$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')
    )
);

Then you only need one loop, something like this:

foreach ($icons as $icon) {
}

and you can use $icon['off'], $icon['hover'], and $icon['label'] as appropriate inside that.