如何使用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％清楚，但我收集您想要在dom ready事件上生成一個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>

PS只是一些東西，任何指向變量jQuery元素的東西應該以$開頭，它只是幫助讀取代碼。

只需快速更新，您還可以使用此代碼減少.press代碼

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

jQuery.toggle接受bool值來顯示目標或隱藏目標

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>