.attr()作为属性选择器中的变量不起作用

时间:2016-06-13 10:20:41

标签: javascript jquery html jquery-selectors

我有这样的代码

<div class="field">
    <label>Title</label>
    <input id="post-titie" type="text">
</div>
<div class="ui olive message" for-field="post-title" hidden>
    <div class="header">About Title</div>
    <ul class="list">
        <li>Visitors can see your title even if they're not logged in.</li>
        <li>The title is public.</li>
    </ul>
</div>
$('.form textarea, :input').focus(function(){

    var forwhom = $(this).attr('id'); /* not working */
    /* var forwhom = 'post-title';  works */

    var _msg = $(this).parents().eq(2).find('div[for-field="'+forwhom+'"]');
    $(_msg).transition('fade down').transition('show');

    console.log(forwhom);
    console.log(_msg);
}

我想要做的是在<input><textarea>关注时,使用.message类显示消息div。

我将$(this).attr('id')作为变量(例如post-title),并使用.find('div[for-field="'+forwhom+'"]')找到它。这不起作用。

但如果我将var forwhom$(this).attr('id')(jQ选择器)替换为绝对值,例如post-title,它确实有效。

太奇怪了!根据jQuery文档,.attr()方法返回一个字符串而不是一个对象。

有什么问题?

3 个答案:

答案 0 :(得分:0)

import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.GridBagConstraints; import java.awt.GridBagLayout; import java.awt.Insets; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Vector; import javax.swing.JButton; import javax.swing.JDialog; import javax.swing.JPanel; import javax.swing.JScrollPane; import javax.swing.JTable; import javax.swing.JTextField; import javax.swing.border.EmptyBorder; import javax.swing.table.DefaultTableModel; public class FindStudent extends JDialog { private final JPanel contentPanel = new JPanel(); private JTextField textField; private JTextField textField_1; private JTable table; Connection conn = null; Statement stmt = null; /** * Launch the application. */ public static void main(String[] args) { try { FindStudent dialog = new FindStudent(); dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE); dialog.setVisible(true); } catch (Exception e) { e.printStackTrace(); } } /** * Create the dialog. */ public FindStudent() { Vector<Vector<String>> data = new Vector<Vector<String>>(); Vector<String> columnNames = new Vector<String>(); columnNames.add("RegNo"); columnNames.add("StudentName"); columnNames.add("FatherName"); columnNames.add("Class"); String query = "Select RegNo, StudentName, FatherName, Class from SchoolDB.dbo.StudentProfile"; try{ conn = DriverManager.getConnection("jdbc:sqlserver:" + "//" + "localhost;1433" + "Database=SchooDB"+";integratedSecurity=true;"); Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); stmt = conn.createStatement(); ResultSet rs = stmt.executeQuery(query); while (rs.next()) { Vector<String> vstring = new Vector<String>(); vstring.add(rs.getString("RegNo")); vstring.add(rs.getString("StudentName")); vstring.add(rs.getString("FatherName")); vstring.add(rs.getString("Class")); data.add(vstring); } } catch (Exception e){ e.printStackTrace(); } /*catch (SQLException e) { e.printStackTrace(); }*/ finally{ if (stmt != null) { try { stmt.close(); } catch (SQLException ex) { ex.printStackTrace(); } } } setBounds(100, 100, 430, 350); this.setAlwaysOnTop(true); this.setModal(true); getContentPane().setLayout(new BorderLayout()); contentPanel.setBackground(Color.WHITE); contentPanel.setBorder(new EmptyBorder(5, 5, 5, 5)); getContentPane().add(contentPanel, BorderLayout.CENTER); GridBagLayout gbl_contentPanel = new GridBagLayout(); gbl_contentPanel.columnWidths = new int[]{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}; gbl_contentPanel.rowHeights = new int[]{0, 0, 35, 0}; gbl_contentPanel.columnWeights = new double[]{0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE}; gbl_contentPanel.rowWeights = new double[]{0.0, 0.0, 0.0, Double.MIN_VALUE}; contentPanel.setLayout(gbl_contentPanel); { textField = new JTextField(); GridBagConstraints gbc_textField = new GridBagConstraints(); gbc_textField.anchor = GridBagConstraints.NORTH; gbc_textField.fill = GridBagConstraints.HORIZONTAL; gbc_textField.gridwidth = 25; gbc_textField.insets = new Insets(0, 0, 10, 5); gbc_textField.gridx = 1; gbc_textField.gridy = 0; contentPanel.add(textField, gbc_textField); textField.setColumns(10); } { textField_1 = new JTextField(); GridBagConstraints gbc_textField_1 = new GridBagConstraints(); gbc_textField_1.gridwidth = 25; gbc_textField_1.insets = new Insets(0, 0, 10, 5); gbc_textField_1.anchor = GridBagConstraints.NORTH; gbc_textField_1.fill = GridBagConstraints.HORIZONTAL; gbc_textField_1.gridx = 1; gbc_textField_1.gridy = 1; contentPanel.add(textField_1, gbc_textField_1); textField_1.setColumns(10); } { table = new JTable(); GridBagConstraints gbc_table = new GridBagConstraints(); gbc_table.insets = new Insets(0, 0, 0, 5); gbc_table.anchor = GridBagConstraints.NORTH; gbc_table.gridwidth = 3; gbc_table.gridx = 1; gbc_table.gridy = 2; DefaultTableModel model = new DefaultTableModel(data, columnNames); final JTable table = new JTable(model);/*{ @Override public Dimension getPreferredScrollableViewportSize() { return new Dimension(100, 100); } };*/ table.setPreferredScrollableViewportSize(new Dimension(425, 200)); table.setFillsViewportHeight(true); table.getColumnModel().getColumn(0).setPreferredWidth(90); table.getColumnModel().getColumn(1).setPreferredWidth(120); table.getColumnModel().getColumn(2).setPreferredWidth(120); table.getColumnModel().getColumn(3).setPreferredWidth(40); JScrollPane jsp = new JScrollPane(table); GridBagConstraints jsp_scroll = new GridBagConstraints(); jsp_scroll.insets = new Insets(0, 0, 0, 5); jsp_scroll.fill = GridBagConstraints.BOTH; jsp_scroll.gridwidth = 25; jsp_scroll.gridx = 1; jsp_scroll.gridy = 3; contentPanel.add(jsp, jsp_scroll); } { JPanel buttonPane = new JPanel(); buttonPane.setBackground(Color.WHITE); buttonPane.setLayout(new FlowLayout(FlowLayout.RIGHT)); getContentPane().add(buttonPane, BorderLayout.SOUTH); { JButton okButton = new JButton("OK"); okButton.setBackground(Color.WHITE); okButton.setActionCommand("OK"); buttonPane.add(okButton); getRootPane().setDefaultButton(okButton); } { JButton cancelButton = new JButton("Cancel"); cancelButton.setBackground(Color.WHITE); cancelButton.setActionCommand("Cancel"); buttonPane.add(cancelButton); } } } } 属性Divfor-field="post-title" inputpost-titie

spelling mistakepost-title与您的代码未找到具有for属性的div的原因不同。

答案 1 :(得分:0)

我正在获取id属性。检查控制台错误:

$(function(){
    $('.form textarea, :input').focus(function(){

    var forwhom = $(this).attr('id'); /*  working */
    /* var forwhom = 'post-title';  works */

    console.log(forwhom);
});

});

这是工作小提琴 https://jsfiddle.net/sesn/x1ju006b/1/

答案 2 :(得分:0)

一些提示:

1)使用chrome dev工具在控制台中测试你的选择器

2)使用.prop()代替.attr()

3).closest()而不是$(this).parents().eq(2)