javascript - jquery 変数を呼び出すにはどうすればよいですか?

Question

これは非常に簡単だと思いますが、私はjqueryが初めてで、ちょっと行き詰まっています。

私は完全に動作するこのコードを書きました：

function engageMaps(){
  $(".destinations #cancun").hover(
    function () {
      $(".image_map #cancunPin").addClass("active");
    },
    function () {
      $(".image_map #cancunPin").removeClass("active");
    }
  );
};

次に、アイテムを変数に分割してより柔軟にしようとしましたが、機能させることができません。私はこれを書きました：

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var pin = $(".image_map #cancunPin");
  $destination.hover(
    function () {
      $pin.addClass("active");
    },
    function () {
      $pin.removeClass("active");
    }
};

これは、最初のコード ブロックとまったく同じである必要があります。どんな助けでも大歓迎ですありがとう

Answer 1

あなたは行方不明);です.hover..

$destination.hover(
   function () {
     $pin.addClass("active");
   },
   function () {
     $pin.removeClass("active");
   }
);

また、あなたは逃しました$。下記参照。

var $pin = $(".image_map #cancunPin");

完全なコード:

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var $pin = $(".image_map #cancunPin"); //Added $ to pin var name as that is how it is referenced below

  $destination.hover(
    function () {
      $pin.addClass("active");
    },
    function () {
      $pin.removeClass("active");
    }
   ); //this was missing
} //removed semicolon as it is not necessary

Answer 2

    v---------- You forgot this
var $pin = $(".image_map #cancunPin");

また、あなたは行方不明);です.hover。

したがって、コードの最終バージョンは次のとおりです。

function engageMaps() {
    var $destination = $(".destinations #cancun");
    var $pin = $(".image_map #cancunPin");
    $destination.hover(
        function() {
            $pin.addClass("active");
        }, function() {
            $pin.removeClass("active");
        }
    );
};​

Answer 3

$destination.hover(
    function () {
      $pin.toggleClass("active");
    });

したがって、完全なコードは次のとおりです。

function engageMaps(){
  var $destination = $(".destinations #cancun");
  var $pin = $(".image_map #cancunPin"); // you use pin instead of $pin
  $destination.hover(
    function () {
      $pin.toggleClass("active");
  });
};