Question

我构建了一个函数来在

的HTML元素中显示一个值

<input type="range">

对象。

我的功能正常：

var rangeValues = { "50": "Fifty" , "100": "Hundred" , "...": "..." };

  $(function Skilllevel() {
    $('#rangeText').text(rangeValues[$('#rangeInput').val()]);
    $('#rangeInput').on('input change', function ()
        {
        $('#rangeText').text(rangeValues[$(this).val()]);
        });
  });

请参阅jsfiddle

中的示例

我现在的问题如下：我将函数Skilllevel()放入$.each(result, function并进入它，它不起作用，因为我的第二个JSON文件var urlBewerbungID = "json.php";中的每个条目都生成了一个单独的列表$("#ergebnisSkill").append(

中的元素

第二个JSON看起来非常简单，如下所示：

[
  "item1",
  "item2",
  "item3"
]

我的完整功能：

//Skills selektieren

var rangeValues = {
  "0": "Keine",
  "33": "Anfänger",
  "66": "Fortgeschritten",
  "99": "Profi"
};

//Abfrage, welche Stelle gewählt wurde
$('#bewerbungID').on('change', function() {
  var bewerbungID = ($('#bewerbungID').val());
  console.log("BewerbungsID gewählt: " + bewerbungID);

  //Zuerst das #HTML Element leeren
  $("#ergebnisSkill").empty();

  $(document).ready(function() {
    var urlBewerbungID = "json.php";
    $.getJSON(urlBewerbungID, function(result) {
      console.log(result);
      $.each(result, function(i, field) {
        var skill = field;

        //Skill liste erstellen
        $(function Skilllevel() {
          $('#rangeText').text(rangeValues[$('#rangeInput').val()]);
          $('#rangeInput').on('input change', function() {
            $('#rangeText').text(rangeValues[$(this).val()]);
          });
        });

        //Jetzt HTML Element neu befüllen
        $("#ergebnisSkill").append(

          '<li>' +
          '<div class="item-content">' +
          '<div class="item-media"><i class="icon f7-icons">star</i></div>' +
          '<div class="item-inner">' +
          '<div class="item-title label">' + skill + '<br> <span id="rangeText"></span></div>' +
          '<div class="item-input">' +
          '<div class="range-slider">' +
          '<input type="range" id="rangeInput" min="0" max="99" value="0" step="33">' +
          '</div>' +
          '</div>' +
          '</div>' +
          '</div>' +
          '</li>'

        );

      });
    });
  });
});

Answer 1

你的代码完全没了。

您需要document.ready来包装事件处理程序。
使用class而不是ID，ID必须是唯一的
使用委托 - 目前每个结果都有一个功能不起作用。

您需要为每个结果分配但已委派的技能功能 - 请参阅rangeInput将如何捕获ergebnisSkill上的点击：

//Skills selektieren
var rangeValues = {
  "0": "Keine",
  "33": "Anfänger",
  "66": "Fortgeschritten",
  "99": "Profi"
};


$(document).ready(function() {

  //Skill liste erstellen

  $("#ergebnisSkill").on('input change', ".rangeInput", function() { // delegation
    $(this).closest("item-inner") // a parent div
      .find('.rangeText') // the input field
      .text(rangeValues[$(this).val()]);
  });

  //Abfrage, welche Stelle gewählt wurde
  $('#bewerbungID').on('change', function() {
    var bewerbungID = ($('#bewerbungID').val());
    console.log("BewerbungsID gewählt: " + bewerbungID);

    //Zuerst das #HTML Element leeren
    $("#ergebnisSkill").empty();

    var urlBewerbungID = "json.php";
    $.getJSON(urlBewerbungID, function(result) {
      console.log(result);
      $.each(result, function(i, field) {
        var skill = field;


        //Jetzt HTML Element neu befüllen
        $("#ergebnisSkill").append(

          '<li>' +
          '<div class="item-content">' +
          '  <div class="item-media"><i class="icon f7-icons">star</i></div>' +
          '  <div class="item-inner">' +
          '    <div class="item-title label">' + skill + '<br> <span class="rangeText"></span></div>' +
          '    <div class="item-input">' +
          '      <div class="range-slider">' +
          '        <input type="range" class="rangeInput" min="0" max="99" value="0" step="33">' +
          '      </div>' +
          '    </div>' +
          '  </div>' +
          '</div>' +
          '</li>'

        );
      });
    });
  });
});

jQuery：动态生成的列表项中的函数不起作用

1 个答案: