Question

以下代码由stackoverflow上的用户和朋友之一给出，作为我的问题的解决方案。 HTML代码

<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识别文本框？或者我必须为每个文本框编写单独的函数？

文本框之间不仅有文本框，还有一组单选按钮，选择框和一组复选框，因此当焦点出现在这些单选按钮或选择框或复选框时，相关图像应该对应它们。变得可见。所以

Que 2.如何区分上述控制的图像？

Que 3.在代码中将执行以下哪一行以及如何执行它意味着首先执行哪个函数然后以这种方式执行哪个函数？。images.hide（）当量（J）.show（）;

请尽可能深入回答上述问题，因为我是jquery的新手。我想知道它是如何工作的谢谢

Answer 1

我很难理解你所说的内容，但如果我理解正确，你会有一系列与一系列图像匹配的输入（输入，选择，文本区域......）。您希望根据哪个输入具有焦点来控制图像的显示/隐藏行为。

您可以解决此问题的方式是在图像和输入之间以编程方式在DOM中设置的关系。现在，您使用外观顺序。它可以工作，但你必须在维护期间的六个月内记住尊重这种无形的规则。

因此，我会提出另一种选择，更具语义性和可读性：使用类和ID。必须放在一起的输入和图像将共享一个共同的标识符号（例如：<input id="input-5" type="text"/>用于输入，<img id="image-5" src="path.jpg"/>用于图像，然后使用标识号在每个（）函数中重建选择器。

jquery会是喜欢的东西：

$(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）。

告诉我，如果我走在正确的轨道上，或者我是否完全误解了你的需要。如果我走在正确的轨道上，我们将能够通过完成此逻辑来解决您的剩余问题。

如何使用jQuery执行以下任务？

1 个答案: