document.getElementById (''). Src == ??? (Tương đương với FAIL)

Question

javascript của tôi là

function changeImage(imgID) { 
var baseurl = "media/images/"; 
if (document.getElementById(imgID).src == baseurl+"selection-off.png") { 
    alert('Success'); 
    document.getElementById(imgID).src = baseurl+"selection-no.png"; } 
else { 
    alert('Fail'); } } 

và HTML của tôi là

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div> 

Tôi luôn luôn nhận thất bại khi nhấn vào hình ảnh. Tôi phải thiếu một cái gì đó thực sự tiểu học.

Answer 1

Một số trình duyệt chuyển đổi img src để url đầy đủ (bao gồm cả http://www....)

thử cảnh báo nó để đảm bảo ..

Bạn có thể sử dụng

document.getElementById(imgID).src.indexOf(baseurl+"selection-off.png") >= 0 

mà kiểm tra nếu một chuỗi được chứa trong khác ..

Answer 2

Bạn có chắc chắn DOM được tạo khi kịch bản được tải không?

Answer 3

Chuỗi cảnh báo document.getElementById (imgID) .src. Nó có thể lấy đường dẫn đầy đủ, bao gồm tên máy chủ trong khi chuỗi bạn đang so sánh có đường dẫn tương đối.

Answer 4

Đó là vì thuộc tính src được thay đổi bởi trình duyệt. Đừng làm theo cách đó, cách thích hợp để kiểm tra và thay đổi lớp css hoặc thuộc tính kiểu thay thế.

Answer 5

Tôi đã thử mã trên máy chủ của riêng tôi.

Kết quả:

document.getElementById(mustard-img).src là 'http://localhost/webfiles/media/images/selection-off.png'

baseurl+"selection-off.png" là' media/images/selection-off.png '

baseurl dường như hiển thị các url tương đối mà thôi. Vì vậy, đó là lý do tại sao "Thất bại" được cảnh báo.

Answer 6

Hộp kiểm dựa trên hình ảnh khá phổ biến, nhưng đây là giải pháp đầy đủ.

1) Hiển thị hộp kiểm thực tế trước tiên. Những công việc này cho 100% trình duyệt.

2) Khi tải trang, đặt "hộp kiểm hình ảnh" của bạn bên cạnh hộp kiểm và ẩn các hộp kiểm

3) Khi hình ảnh được nhấp, chuyển vào hộp kiểm và sử dụng hộp kiểm ẩn để xác định tình trạng bức hình.

Khi biểu mẫu được POST, các hộp kiểm sẽ hoạt động như hộp kiểm thông thường. Nếu JavaScript bị vô hiệu hóa hoặc không có sẵn, biểu mẫu vẫn có thể sử dụng được.

Answer 7

Hãy thử với đoạn mã sau:

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage(this)" /></div> 

<script> 
function changeImage(img) { 
    if (img.src.indexOf('selection-off.png')) { 
     alert('Success'); 
     img.src.replace(/selection-off.png/, 'selection-no.png'); 
    }else{ 
     alert('Fail'); 
    } 
} 
</script> 

Sự khác biệt với mã của bạn:

• đi qua các tài liệu tham khảo img: this thay cho id trong hàm onclick
• sử dụng indexOf thay vì ==, đối với đường dẫn tương đối