jquery बदलती छवि src

Question

$("#adminLink") के साथ कोड ठीक काम करता है, लेकिन $("#itemLink") नहीं है। मैंने जो कुछ भी सोच सकता हूं उसकी कोशिश की है। मुझे लगता है कि मुझे आंखों की एक नई जोड़ी चाहिए। जब मैं तत्व पर क्लिक करता हूं तो मैं इन दो आईएमजी के स्रोत को बदल रहा हूं।

कोड:

$(document).ready(function() { 

    HidelemArr = new Array(); 
    HidelemArr[0] = "addItem"; 
    HidelemArr[1] = "addAdmin"; 
    //* hide presets 
    $.each(HidelemArr, function() { 
     $("#" + this).hide(); 
    }) 
    //* 

    $("#adminLink").click(function() { 
     var chld = $("#menuIMG"); 
     var vis = (document.getElementById(HidelemArr[1]).style.display == 'block') ? 1 : 0; 
     changeDisplay(HidelemArr[1], vis, chld); 
    }); 

    $("#itemLink").click(function() { 
     var chld = $("#Mitemimg"); 
     var vis = (document.getElementById(HidelemArr[0]).style.display == 'block') ? 1 : 0; 
     changeDisplay(HidelemArr[0], vis, chld); 
    }); 

}); 

function changeDisplay(id, vis, chld) { 

    $.each(HidelemArr, function() { 
     if ((this == id) && (vis == 0)) { 
      chld.attr("src", "images/icon_sync.gif"); 
      $("#" + this).slideDown('slow', function() {}); 
     } else { 
      chld.attr("src", "images/icon_trace.gif"); 
      $("#" + this).slideUp('slow', function() {}); 
     } 
    }) 

} 

एचटीएमएल:

<ul> 
       <li class="header">Quick Access:</li> 

       <li ><span id="itemLink"> 
        <a >Add Item</a> 
        <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"></span></li> 

       <li ><span id="adminLink"> 
        <a >Add Administrator</a> 
        <img id="menuIMG" class="qaimg" src="images/icon_trace.gif"></span></li> 
      </ul> 
      </div> 

      <div id="main"> 
      <h1>Actions Required:</h1> 
      <div id="forms"> 
       <table class="linkForm" id="addItem"> 
       <?php require_once 'additemform.php'; ?> 
       </table> 
       <table class="linkForm" id="addAdmin"> 

        <?php require_once 'addAdminForm.php'; ?> 

       </table> 
      </div> 
      </div> 

Answer 1

डेमो:http://jsfiddle.net/235ap/

आप छवि डेमो में बदल रहा है, लेकिन यदि आप निरीक्षक को देखो, यह बदल रहा है नहीं देख सकेंगे।

एचटीएमएल

<ul class="nav"> 
    <li class="header">Quick Access:</li> 
    <li>   
     <a id="itemLink" href="#">Add Item</a> 
     <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"> 
    </li> 
    <li> 
     <a id="adminLink" href="#">Add Administrator</a> 
     <img id="menuIMG" class="qaimg" src="images/icon_trace.gif"> 
    </li> 
</ul> 
<div id="main"> 
    <h1>Actions Required:</h1> 

    <div id="forms"> 
     <table id="addItem" class="linkForm" style="display: none;"> 
      <tr> 
       <td>addItemTable</td> 
      </tr> 
     </table> 
     <table id="addAdmin" class="linkForm" style="display: none;"> 
      <tr> 
       <td>addAdminTable</td> 
      </tr> 
     </table> 
    </div> 
</div> 

जे एस

$(document).ready(function() { 
    $('#adminLink').click(function(event) { 
     event.preventDefault(); 
     change('#menuIMG', '#addAdmin'); 
    }); 

    $('#itemLink').click(function(event) { 
     event.preventDefault(); 
     change('#Mitemimg', '#addItem'); 
    }); 

}); 

function change(imgId, divId) { 
    // reset img src 
    $('.qaimg').attr('src', 'images/icon_trace.gif'); 

    // set img src 
    $(imgId).attr('src', 'images/icon_sync.gif'); 

    // slide up all 
    $('#forms .linkForm').slideUp('slow', function() { 
     // slide down div 
     $(divId).slideDown('slow', function() {}); 
    }); 
} 

ऊपर समारोह परिवर्तन में

, जब लिंक दूसरी बार के लिए चुना गया है। स्लाइडिंग के चरण में, यह ऊपर स्लाइड और फिर नीचे स्लाइड। नीचे वही कार्य है जो इसके लिए किए गए बदलावों के साथ ठीक से काम करता है।

function change(imgId, divId) { 
     //check to see if div is visable 
     var vis = ($(divId).css('display') == 'none')? false:true; 

     // slide up all 
     $('#forms .linkForm').slideUp('slow', function() { }); 
     // reset img src 
     $('.qaimg').attr('src', 'images/icon_trace.gif'); 

    // if div isn't visable 
    if(!vis){ 
     // slide down div 
     $(imgId).attr('src', 'images/icon_sync.gif'); 
     // set img src 
     $(divId).slideDown('slow', function() {}); 
    } 
} 

Answer 2

मुझे इस बात की पुष्टि करने के लिए, लेकिन मैं मूलभूत बातों से प्रारंभ होता है आप HTML पोस्ट नहीं किया है - आप के लिए केमलकेस उपयोग कर रहे हैं HidelemArr सरणी (addAdmin) में दूसरा आइटम, लेकिन इसमें पहला आइटम (additem) सभी लोअरकेस है।

अपने पूंजीकरण के साथ नामों को सुनिश्चित करने के लिए अपने एचटीएमएल की जांच करें। यदि आप कर सकते हैं तो भी अपने पूंजीकरण को मानकीकृत करने का प्रयास करें।