如何使用javascript正确处理函数中的调用函数

Question

我试图了解如何使用javascript处理某些事件,特别是如果触发了特定事件,则当前函数调用另一个函数.在onLoad上,javascript创建第一个从第一个对象中选择数据.然后,如果我选择值为"Iphone"的语音被称为另一个功能,用于创建具有一些价格的第二个菜单.我的主要问题是我的解决方案似乎非常难看,而且当我在按钮上单击多次时,它每次都会创建相同的第二个选择.

//global objects
var product = [
  {name: "Samsung"},
  {name: "Iphone"},
  {name: "Alcatel"},
  {name: "Sony"}
]

var productPrice = [
  {name: "Samsung", price: 190},
  {name: "Iphone", price: 290},
  {name: "Alcatel", price: 65},
  {name: "Sony", price: 330}
]

var main = function() {
  var sel = $('<select>').appendTo('#select-1');
  
  $(product).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.name));
  });
  
  $('.press').click(function() {
    if ($("#select-1 option:selected").text() == "Iphone") {
      handleEvent();
    }
    
    if ($("#select-1 option:selected").text() != "Iphone") {
      $("#risposta").remove();
    }
  });
}

function handleEvent() {
  var sel = $('<select>').appendTo('#select-2');
  
  $(productPrice).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.price));
  });
}

$(document).ready(function() {
  main();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="select-1">
</div>
<div id="select-2">
</div>
<button class="press">Click</button>

小提琴

有什么建议？

Answer 1

你的问题对我来说并不是 100% 清楚，但我认为你想在你已经准备好的事件select上生成一个标签。dom当您选择该选项iPhone并点击Click按钮时，您希望select使用变量中的新选项生成另一个标签。

第一个选项

这是我在下面提供的。它基本上是你的代码，但有一个额外的 if 语句

jsFiddle 链接： https: //jsfiddle.net/qu9zs2h1/2/

JavaScript

//global objects
var product = [{
  name: "Samsung"
}, {
  name: "Iphone"
}, {
  name: "Alcatel"
}, {
  name: "Sony"
}]

var productPrice = [{
  name: "Samsung",
  price: 190
}, {
  name: "Iphone",
  price: 290
}, {
  name: "Alcatel",
  price: 65
}, {
  name: "Sony",
  price: 330
}]

var main = function() {
  var sel = $('<select>').appendTo('#select-1');

  $(product).each(function() {
    sel.append($("<option>").attr('value', this.name).text(this.name));
  });

  $('.press').click(function() {
    if ($("#select-1 option:selected").text() == "Iphone") {
      handleEvent();
    }

    if ($("#select-1 option:selected").text() != "Iphone") {
      $("#risposta").remove();
    }
  });
}

function handleEvent() {
  // We still run the handleEvent function however, if check to see
  // if the second select option has been generated by checking a 
  // class
  if (!$('.prices').length) {
    var sel = $('<select class="prices">').appendTo('#select-2');
    $(productPrice).each(function() {
      sel.append($("<option>").attr('value', this.name).text(this.price));
    });
  }
}

$(document).ready(function() {
  main();
});

网页

<div id="select-1">
</div>
<div id="select-2">
</div>
<button class="press">Click</button>

我必须将该类添加prices到您的第二个类中select，但这只是一个您可以重命名的类，用于查看该元素是否已经存在。

第二种选择（可能是更好的方法）

您是否dom准备好生成所有内容并在开始时隐藏您想要的内容，然后show在需要时隐藏您想要的元素，就像这样

jsFiddle： https: //jsfiddle.net/qu9zs2h1/5/

JavaScript

//global objects
var product = [{
  name: "Samsung"
}, {
  name: "Iphone"
}, {
  name: "Alcatel"
}, {
  name: "Sony"
}]

var productPrice = [{
  name: "Samsung",
  price: 190
}, {
  name: "Iphone",
  price: 290
}, {
  name: "Alcatel",
  price: 65
}, {
  name: "Sony",
  price: 330
}]

// On document ready run this script
$(function() {
    $('.jshidden').removeClass('jshidden').hide();

  var $select1 = $('#select-1');
  var $select2 = $('#select-2');
  var $sel1 = $('<select>').appendTo($select1);
  var $sel2 = $('<select>').appendTo($select2);

  $(product).each(function() {
    $sel1.append($("<option>").attr('value', this.name).text(this.name));
  });

  $(productPrice).each(function() {
    $sel2.append($("<option>").attr('value', this.price).text(this.price));
  });

  $('.press').click(function() {
    if ($select1.find(":selected").text() == "Iphone") {
      $select2.show();
    }

    if ($select1.find(":selected").text() != "Iphone") {
      $select2.hide();
    }
  });
});

网页

<div id="select-1">
</div>
<div id="select-2" class="jshidden">
</div>
<button class="press">Click</button>

PS 只是一点点，任何引用作为jQuery元素的变量的东西都应该以 a 开头，$它只是有助于阅读代码。

快速更新一下就好了，还可以.press用这个代码减少代码量

$('.press').click(function() {
  var iPhoneCheck = $select1.find(":selected").text() == "Iphone";
    $select2.toggle(iPhoneCheck);
  });

jQuery.toggle接受一个布尔值来显示目标或隐藏目标