如何使用jQuery做以下任務？

以下代碼由用戶和朋友在stackoverflow上爲我的問題提供解決方案。 HTML代碼如何使用jQuery做以下任務？

<img src="https://s3.amazonaws.com/twitter_production/a/1265328866/images/twitter_logo_header.png"/> 

<input type="text"/> 
<input type="text"/> 
<input type="text"/> 
<input type="text"/> 

<div class="sample"> 
    <img src="http://sstatic.net/so/img/logo.png"> 
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"> 
    <img src="http://cacm.acm.org/images/logo.ACM.gif"> 
    <img src="http://static03.linkedin.com/img/logos/logo_linkedin_88x22.png"> 
</div>

jQuery代碼

$(function() { 
    var textboxes = $("input:text"), //gets all the textboxes   
     images = $(".sample img"); //gets all the images 

    images.not(":first").hide(); //hide all of them except the first one 
    textboxes.each(function (i) { 
     var j = i; 
     $(this).focus(function() { 
      images.hide().eq(j).show(); 
     }); 
    }); 
});

上面的代碼示出了與具有聚焦，並在同一時間隱藏了所有三個圖像的其餘文本框圖像。

上述方法的推移依次作爲用於第一個文本框的第一圖像是可見的，對於第二個文本框發送圖像以這種方式可見。現在的問題是我想說明1.當焦點談到第一個文本框的第一圖像可見 2.當焦點涉及到第二個文本框第二圖像是可見 3.當焦點涉及到第三個文本框，我想第二因爲它是可見的這樣4和第五個文本框之後當第六個文本框再次出現時第三個圖像應該是可見的。

QUE 1.是否有可能以顯示圖像，因爲我想要的，但使用循環在上面的代碼，並使用jquery識別的文本框中？或者我必須爲每個文本框編寫單獨的函數？

在文本框之間不僅有文本框，而且還有一組單選按鈕，選擇框和一組複選框，所以當焦點來到這些單選按鈕或選擇框或選中相關圖像時他們應該可見。所以

闕2.如何我可以爲上述CONTROLE圖像區分？

闕3.什麼下面的行會做的代碼和它如何得到執行以這種方式首先執行該功能，那麼這第二個手段？ images.hide（）。eq（j）.show（）;

請儘可能深入地回答上述問題，因爲我是jquery的新手。我想知道它是如何工作的謝謝

來源

2010-02-08 Param-Ganak

我沒有得到這個部分：「當焦點來到第三個文本框時，我想要第二個圖像，因爲它在第四個和第五個文本框之後以這種方式可見，當第六個文本框再次出現時，第三個圖像應該是可見的。「 – pixeline 2010-02-08 17:56:03

如果您製作了一個列表，顯示每個文本框所需的結果，這將會很有幫助。使用工具欄中的*項目符號列表*圖標。然後描述每個文本框焦點的結果。 *您可以編輯您的原始問題。* – user113716 2010-02-08 18:27:28

我很難理解你說什麼，但如果我理解正確，你有一系列輸入（輸入，選擇，textarea ...）匹配一系列圖像。您想要根據哪個輸入具有焦點來控制圖像的顯示/隱藏行爲。

您可以解決這個問題的方式是在圖像和輸入之間以編程方式在DOM中設置的關係。現在，你使用這個順序。它可以工作，但是在維護期間你必須在六個月內記住，以尊重這個看不見的規則。

因此，我會提出另一種選擇，更多的語義和可讀性：使用類和ID。輸入和圖像必須共享一個共同的識別號碼（例如：<input id="input-5" type="text"/>爲您的輸入，<img id="image-5" src="path.jpg"/>爲您的圖像，然後使用識別號碼重建每個（）函數中的選擇器。什麼東西在喜歡：

$(function() { 

$('.image').hide(); 

$('input').focus(function(){ 
    var parts= $(this).attr('id').split('-'); 
    var uId = parts[1]; 
    alert(uId); 
    // now, find the right image to show 
    $('.image').hide(); 
    $('#image-'+uId).show(); 

}); 
});

你可以看到一個live example here（你可以用它玩here）。

告訴我，如果我在正確的軌道上，或者如果我完全誤解了你的需要。如果我在正確的軌道上，我們將通過完成這一邏輯來解決您剩餘的問題。

來源

2010-02-08 18:15:57 pixeline

如何使用jQuery做以下任務？

回答

相關問題