0

私のボタンがそれらにバインドされた機能を呼び出すことを望みます。誰かがここで何がうまくいかなかったのか説明できますか? <button>Javascript を注入したいくつかの要素に機能をバインドしましたがuser.method、41 行目で が返されているようundefinedです。

http://codepen.io/ueeieei/pen/KNQbXO?editors=0011

var $container = $('.container');

class User {
  constructor(name, age, type) {
    this.name = name;
    this.age = age;
    this.type = type;
  }

  sing() {
    alert("singing");
    console.log("singing");
  }

  sleep() {
    alert("sleeping");
    console.log("sleeping");
  }

  collectMethods() {
    var methodNames = {
      sing: "Sing",
      sleep: "Sleep"
    };

    return methodNames;
  }
}

function createButton(user) {
  var methodNames = user.collectMethods();

  for (var method in methodNames) {
    var $btn = $('<button>' + methodNames[method] + '</button>');
    $btn.bind("click", user.method);
    $container.append($btn);
  };
}

var udi = new User("Udi", 97.2, "In-Process");
var serj = new User("Serge", "30ish", "musico-programmer")

createButton(udi);
body {
  background-color: rgba(0, 0, 0, .8);
  color: white;
}
.container {
  border: 1px solid white;
  padding: 15px;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- content here -->
</div>

4

1 に答える 1

1

あなたの問題は、イベントハンドラーでmethod変数であるためです。名前を変数に格納してオブジェクトのプロパティにアクセスするには、ブラケット表記を使用する必要があります。たとえば、user[method]代わりにuser.method.

bind()また、ずっと前に廃止されたことに注意してください。on()代わりに使用する必要があります。また、使用している jQuery のバージョンを再確認し、必要に応じて更新する必要があります。少なくとも 1.12 にアップグレードすることをお勧めします。

コードの作業バージョンは次のとおりです。

var $container = $('.container');

class User {
  constructor(name, age, type) {
    this.name = name;
    this.age = age;
    this.type = type;
  }

  sing() {
    alert("singing");
    console.log("singing");
  }

  sleep() {
    alert("sleeping");
    console.log("sleeping");
  }

  collectMethods() {
    var methodNames = {
      sing: "Sing",
      sleep: "Sleep"
    };

    return methodNames;
  }
}

function createButton(user) {
  var methodNames = user.collectMethods();

  for (var method in methodNames) {
    var $btn = $('<button>' + methodNames[method] + '</button>');
    $btn.on("click", user[method]); // this is the line which was fixed
    $container.append($btn);
  };
}

var udi = new User("Udi", 97.2, "In-Process");
var serj = new User("Serge", "30ish", "musico-programmer")

createButton(udi);
body {
  background-color: rgba(0, 0, 0, .8);
  color: white;
}
.container {
  border: 1px solid white;
  padding: 15px;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- content here -->
</div>

于 2016-12-04T16:52:46.490 に答える