Question

我有两个html元素。第一个是类编辑，第二个是edits2。我希望为两个类运行一个具有相同功能但具有不同变量的脚本

HTML

<i data-orderid="<?php echo $row['order_id']; ?>" class="edits fa fa-pencil-square-o"></i>

<i data-orderid="<?php echo $row['order_id']; ?>" class="edits2 fa fa-pencil-square-o"></i>

Jquery的

$('.edits').click(function(event) {
  .... Do something...});

$('.edits2').click(function(event) {
  .... Do something...});

有没有办法让一个脚本依赖于类选择器来执行该函数，还是需要为每个元素编写不同的脚本？

Answer 1

您可以将点击次数绑定到您定义的函数，而不是匿名函数...

function edit(){ /* ... */ }
$('.edits, .edits2').on("click", edit);

编辑：不确定我是否理解，您还可以使用

查找功能中的课程

if($(this).hasClass( "edits2" )){
  //edits 2 code
}else{
  //edits code
}

Answer 2

您可以在两个元素的点击内调用函数...

import React, { Component } from 'react'
import pageStyles from '../../../styles.scss'

class MyInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dropdownIsVisible: false,
      dropdownCssClass: 'dropdown'
    }
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleFocus () {
    this.setState({
      dropdownIsVisible: true,
      dropdownCssClass: ['dropdown', pageStyles.dropdown].join(' ')
    })
  }

  handleBlur () {
    this.setState({
      dropdownIsVisible: false,
      dropdownCssClass: 'dropdown'
    })
  }

  handleClick () {
    console.log('here I am')
  }

  render() {
    const {
      input: {
        name,
        value,
        onFocus
      },
      label,
      hasOptions,
      options,
      cssClass,
      meta: {
        touched,
        error
      }
    } = this.props

    if(options) {
      var listItems = options.map((item) =>
        <li key={ item.id } onClick={ this.handleClick }>{ item.name }</li>
      )
    }

    return (
      <div className={ cssClass }>
        <label>{ label }</label>
        <input name={ name } id={ name } type="text" onFocus={ this.handleFocus } onBlur={ this.handleBlur } autoComplete="off" />
        { hasOptions === true ? <ul className={ this.state.dropdownCssClass }>{ listItems }</ul> : null }
        { touched && error && <span className="error">{ error }</span> }

      </div>
    )
  }
}

export default MyInput

Jquery为不同的类选择器提供相同的功能

2 个答案: