Question

<div class='picture rotate' id="img1">
    <img src="animal/cat.png">
</div>   
<div id="fad1" style="display:none;">Cat</div>

我正在尝试为div pic id和div word id做一个循环jquery如何纠正这个循环抱歉我是jquery的新手，而不是强大的英语。

for(i=1;i<10;i++){
   $("#img"+i).hover(function(){
       $("#fad"+i).fadeToggle(500);
   })
}

我试图做的这个循环不起作用。

Answer 1

您不需要循环只需选择ID以img开头的所有div，然后我们绑定悬停事件并切换下一个id为fad

的div

尝试：

  $('div[id^="img"]').hover(function(){
        $(this).next().fadeToggle(500);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='picture rotate' id="img1">
  <img src="animal/cat.png">
</div>
<div id="fad1" style="display:none;">Cat</div>

<div class='picture rotate' id="img2">
  <img src="animal/cat.png">
</div>
<div id="fad2" style="display:none;">Dog</div>

Answer 2

试试这个..

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class='picture rotate' id="img1">
    <img src="animal/cat.png">
</div>   
<div id="fad1" style="display:none;">Cat</div>
<script>
$(".rotate").hover(function(){
var value=$(this).attr("id");
var matches = value.replace( /[^+-\d.]/g, '');
console.log(matches);
console.log(value);
var number = Number(matches[0]);
$("#fad"+number).fadeToggle(500);
});
</script>

演示：http://js.do/code/73877

Answer 3

您好已经习惯package main.frames; import javax.swing.*; import java.awt.*; public class MainFrame extends JFrame { static JPanel homeContainer; static JPanel homePanel; static JPanel otherPanel; static CardLayout cl; public MainFrame() { JButton showOtherPanelBtn = new JButton("Show Other Panel"); JButton backToHomeBtn = new JButton("Show Home Panel"); cl = new CardLayout(5, 5); homeContainer = new JPanel(cl); homeContainer.setBackground(Color.black); homePanel = new JPanel(); homePanel.setBackground(Color.blue); homePanel.add(showOtherPanelBtn); homeContainer.add(homePanel, "Home"); otherPanel = new JPanel(); otherPanel.setBackground(Color.green); otherPanel.add(backToHomeBtn); homeContainer.add(otherPanel, "Other Panel"); showOtherPanelBtn.addActionListener(e -> cl.show(homeContainer, "Other Panel")); backToHomeBtn.addActionListener(e -> cl.show(homeContainer, "Home")); add(homeContainer); cl.show(homeContainer, "Home"); setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); setLocationRelativeTo(null); setExtendedState(JFrame.MAXIMIZED_BOTH); setTitle("CardLayout Example"); pack(); setVisible(true); } public static void main(String[] args) { SwingUtilities.invokeLater(MainFrame::new); } } 开始使用选择器 [id^="img"] 和 toggle jquery as像这样

＆＃13;

Attribute

＆＃13;

  $('div[id^="img"]').hover(function(){
        $(this).next().toggle(500);
  });

＆＃13;

我怎么能为div pic id和div word id做循环jquery？

3 个答案: