javascript - 如何使用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>

fiddle

有什么建议吗？

Answer 1

你的问题对我来说不是 100% 清楚，但我了解到你想在你已经准备好的 dom 事件上生成一个 select 标签。当您选择选项 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();
});

HTML

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

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

第二种选择(可能是更好的方法)

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

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();
    }
  });
});

HTML

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

附言只是一点点，任何引用 jQuery 元素的变量都应该以 $ 开头，它只是帮助阅读代码。

只是一个快速更新，你也可以用这段代码减少.press代码

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

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