JavaScript .replace Chức năng trong mã jQuery không đưa ra kết quả mong đợi

Question

Tôi có một menu điều hướng được xây dựng bằng PHP sao cho vị trí hiện tại có một hình ảnh khác để người dùng biết chúng ở đâu.

Trong chức năng, tôi đã những thuộc tính HTML outputted:

Để đặt td id:

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

Và để thiết lập img id và người dùng định nghĩa img data-id:

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

Các chức năng cũng có bit này:

... 
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>'; 

để đặt trang hiện tại thành có để gắn thẻ.

Tôi về cơ bản cung cấp cho nó hai mảng liên kết và hình ảnh và trang hiện tại có hình ảnh được đánh dấu. Menu này có vẻ hoạt động tốt và tôi đã sử dụng nó một lúc.

Gần đây tôi đã muốn thay đổi nó để thêm vào chức năng này, tôi sẽ di chuột qua các hiệu ứng với jQuery. Suy nghĩ của tôi là nó khó đến mức nào? Vâng, nó đã khó khăn hơn tôi tưởng tượng. Không có nghĩa là tôi là một chuyên gia về JavaScript hoặc jQuery, vì vậy tôi không ngạc nhiên tôi đang vặn vẹo điều này.

Dưới đây là jQuery Tôi đang làm việc với điều đó là không cho kết quả mong đợi:

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

Điều này dường như làm việc cho nếu phần nhưng các chi nhánh khác không làm những gì tôi nghĩ rằng nó nên . Nó thay đổi liên kết thành ánh sáng và sau đó di chuột thay đổi nó thành tối trên và sau đó bật sáng.

Khi tôi kiểm tra các phần tử với Firefox, các id và thuộc tính lớp là những gì tôi đã đặt, ví dụ: liên kết được đánh dấu được đặt thành có và những người khác không được đặt. Dường như mọi thứ đều hoạt động ngoại trừ nhánh khác. Tôi đang thiếu gì?

EDIT

Tôi nhìn vào mã nguồn trang web khi trang chủ là hiện tại, suy nghĩ nó sẽ là "_dark" bởi vì nó trông giống như hình ảnh tối, nhưng nhưng các nguồn tin cho biết đó là "_light" hình ảnh . Nhưng khi tôi kiểm tra phần tử với Firefox, nó cho tôi biết đó là hình ảnh "_dark" với các thuộc tính alt. Tôi tin rằng PHP đang ghi dữ liệu vào trang (máy chủ có nguồn gốc), như mong đợi, và jQuery đang hành động trên nó (thay đổi DOM), như mong đợi, nhưng tôi không thể làm cho chúng phát một cách chính xác. Tôi nghĩ rằng tôi cần phải bằng cách nào đó thiết lập hình ảnh với jQuery sau sự kiện di chuột để nó trông giống như nó được cho là. Làm thế nào để tôi có được những chức năng như tôi muốn?

EDIT 2

Tôi nghĩ rằng tôi thấy lý do tại sao .attr() và .data() phương pháp jQuery không làm việc. Các docs nói rằng những công việc này với các yếu tố đầu tiên trong bộ sưu tập. Hay tôi hiểu nhầm điều đó? Vì vậy, về cơ bản, mặc dù PHP viết các yếu tố như thế nào tôi muốn nó, ở đúng nơi và với giá trị đúng, khi tôi kiểm tra các yếu tố, tôi nhận được các giá trị khác nhau. Điều này dường như chặn di chuột/thay thế hoạt động chính xác.

tôi đã cố gắng thay đổi này đó là một chút đơn giản hơn:

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

Và tôi thử nghiệm cho test được bằng alt mà bây giờ tôi nói với PHP để đặt ngay sau thẻ img. Nhưng vì một số lý do khi tôi cảnh báo biến số test, Im vẫn chưa được xác định. Có lẽ vì thứ tự thuộc tính thẻ img.

Làm thế nào để các nhà phát triển PHP có được điều này và làm cho PHP và jQuery chơi tốt đẹp với nhau? Có vẻ như những loại tội phạm này sẽ kết thúc trong các trang PHP sử dụng jQuery.

Answer 1

Tuỳ chỉnh HTML thuộc tính chỉ thực sự đến với HTML5, do đó bạn có thể nhận được một vài vấn đề thêm với dữ liệu-id thuộc tính.

Tôi muốn đề xuất thêm lớp học vào img addClass(). Sau đó bạn có thể kiểm tra nếu một phần tử có lớp đó bằng cách sử dụng hasClass().

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

Và sau đó bạn sẽ làm điều gì đó như

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

Answer 2

có vẻ như có lỗi cú pháp trong mã. cố gắng chnage này:

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

tới:

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