如何使用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 上生成所有内容并在开始时隐藏您想要的内容，然后在需要时简单地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();
    }
  });
});

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 接受一个布尔值来显示目标或隐藏目标

Answer 2

//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() {
    var sel2 = document.getElementById('select-2');
    var selectedOption = $("#select-1 option:selected").text();
    if (selectedOption == "Iphone") {
      // check if the select was already added
      if(sel2.children.length == 0)
        handleEvent();
    }
    else {
      // I think here you wanted to remove the second select that was added for iphone option
      sel2.innerHTML = '';
    }
  });
}

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

// if you already have a declared function, there is no need to an anonymous function
// just call the main function directly
$(document).ready(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>