Geek asks and answers

JavaScript.replace function in jQuery code does not produce expected results

I have a navigation menu that is built in PHP, so the current location has a different image, so the user knows where it is.

In the function, I have these HTML attributes:

To install td id:

$menu_output .= '<tr><td id="nav_buttons">';

Both for installation img idand custom img data-id:

$menu_output .= '" id="alt" data-id="yes';

The function also has this bit:

...
if ($current_page == $key) {
    $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
    $menu_output .= '" id="alt" data-id="yes';
}

else {
    $menu_output .= $image_dir . $ds . $page_nav[$key];
}

$menu_output .= '" border="0" height="19" width="129"></a></td>';

to set the current page to yes to mark it.

I basically give him two arrays of links and images, and the image is highlighted on the current page. This menu is working fine and I have been using it for a while.

, jQuery. , , ? , , . JavaScript jQuery, , .

jQuery, , :

$(document).ready(function() {

    var test = $('#alt').attr('data-id');

    if (test != 'yes'){
        $('#nav_buttons img').hover(function() {
            this.src = this.src.replace('_dark', '_light');
        },
        function() {
            this.src = this.src.replace('_light', '_dark');
        });
    }

    else {
        $('#nav_buttons img').hover(function() {
            this.src = this.src.replace('_light', '_dark');
        },
        function() {
            this.src = this.src.replace('_dark', '_light');
        });
    }
});

, if, else , , , . , .

Firefox, , , yes, . , , else. ?

, , , "_dark", , "_light" . Firefox, "_dark" alt. , PHP ( ), , jQuery ( DOM), , . , - jQuery hover, , . , ?

2

, , .attr() .data() jQuery . docs , . ? , , PHP , , , , . , , /.

, :

var test = $('img').data('id');

test alt, PHP, img. - , test, undefined. , img.

PHP PHP jQuery ? , PHP-, jQuery.

+5
2

HTML HTML5, .

img addClass(). , , hasClass().

$menu_output .= '" id="alt" class="data-id-yes"';

-

$(document).ready(function() {
$('#nav_buttons img').hover(function() {
    if($(this).hasClass('data-id-yes')
    {
        this.src = this.src.replace('_dark', '_light');
    } else {
        this.src = this.src.replace('_light', '_dark');
    }
},
function() {
    if($(this).hasClass('data-id-yes')
    {
        this.src = this.src.replace('_light', '_dark');
    } else {
        this.src = this.src.replace('_dark', '_light');
    }
});
});
+3

, . :

$menu_output .= '" id="alt" data-id="yes';


$menu_output .= 'id="alt" data-id="yes"';



$('#nav_buttons img').hover(function() {
      var test = $('#alt').data('id');
        if (test != 'yes'){
            this.src = this.src.replace('_dark', '_light');
        } else {
            this.src = this.src.replace('_light', '_dark');
        }
   }, function() {
       if (test != 'yes'){
            this.src = this.src.replace('_light', '_dark');
       } else {
         this.src = this.src.replace('_dark', '_light');
       }
});
+2

More articles:


All Articles