Question

我已经连接了几个函数，所以它会...

创建新元素并设置其属性和内容
一旦元素到位，它们就会触发功能。

他们这样做！有点......

更像是在创建时触发了附加到它们的一半功能。他们onclick触发一个函数的部分开始加载我的进度条（这是他们的目的）是好的。但更简单的部分，他们在点击后隐藏的地方，却没有。

由于代码非常复杂，我会在这里放置更大的部分，所以不要惊慌。问题可能是我想到的其他地方。这是......

// defines function for checkpoint
    function checkpointed() {   
                this.style.display = 'none'; // !here dwells the douch part!
                if (toLoad < 100) {
                    toLoad += 100/$(this).attr('numButs');
                    var sim = setInterval(progressSim, 50);
            }

    // defining creation of checkpoints
    function checkpoints(num) { 
        var angle = 4.72,
        step = (2 * Math.PI) / num;
        for (i = 1; i < num + 1; i++) {
            var x = $('#progressBar').width()/2 + radius * Math.cos(angle) ; 
            var y = $('#progressBar').height()/2 + radius * Math.sin(angle);
            angle += step;
            var newContent = document.createElement('IMG');
            var newCheckpoint = document.createElement('SPAN');
            var numButs = document.createAttribute('numButs');
            numButs.value = num;
            var Class = document.createAttribute('class');
            Class.value = 'checkpoint';
            var img = document.createAttribute('src');
            img.value = 'img/lock.png';
            newContent.setAttributeNode(img);
            newCheckpoint.setAttributeNode(numButs);
            newCheckpoint.setAttributeNode(Class);
            $(newCheckpoint).append(newContent);
            $('.projectBar').append(newCheckpoint);
            x -= 24;
            y -= 24;
            $(newCheckpoint).offset({top:y, left: x});
            newCheckpoint.onclick = checkpointed;
        };
    };

    // creates checkpoints upon clicking on create button
    document.getElementById('create').onclick = function(){ 
        checkpoints(document.getElementById('numCheckpoint').value);
        $(this).hide();
        $('#numCheckpoint').hide();
    };

我应该总结一下这是什么。

我有循环progressBar来衡量用户项目的进展。用户说“嘿，我的项目有5个步骤（或20个idc）”和“创建”按钮将使5个检查点均匀地放在progressBar上。通过单击检查点，您可以将每个单击检查点的进度条加载20％。

不过不用担心，我已经找到了加载和几何的代码。

但是我有点卡在这里...简单的onclick功能。如果您有任何想法，请尝试使用纯JavaScript或jQuery实现它（尝试在没有其他框架，库或插件的情况下执行此操作）。

EDIT2：想出来了。循环for (i = 1; i < num + 1; i++)将num参数作为来自输入字段的String。这么简单parseInt()就行了。

Answer 1

混合的Jquery和普通的Javascript搞砸了我的脑袋......无论如何，当你创建一个新元素时，给它一些类。而不是给onclick设置，使用jQuery的选择器将点击事件绑定到那些动态元素。尝试以下内容：

 $(document).on("click", ".Checkpoint", function(event) {
    $(event.target).hide();
    if (toLoad < 100) {
      toLoad += 100 / $(this).attr('numButs');
      var sim = setInterval(progressSim, 50);
    }
  });

  // defining creation of checkpoints
  function checkpoints(num) {
    var angle = 4.72,
      step = (2 * Math.PI) / num;
    for (i = 1; i < num + 1; i++) {
      var x = $('#progressBar').width() / 2 + radius * Math.cos(angle);
      var y = $('#progressBar').height() / 2 + radius * Math.sin(angle);
      angle += step;
      var newContent = $('<img></img>');
      var newCheckpoint = $('<span></span>');
      $("body").append(newCheckpoint);
      newContent.attr("numButs", num);
      newContent.attr("src", 'img/lock.png');
      newContent.addClass("Checkpoint");

      $(newCheckpoint).append(newContent);
      $('.projectBar').append(newCheckpoint);
      x -= 24;
      y -= 24;
      $(newCheckpoint).offset({
        top: y,
        left: x
      });

    }
  }

  // creates checkpoints upon clicking on create button
  $(document).on("click","#create",function(e) {
    checkpoints($('#numCheckpoint').val());
    $(e.target).hide();
    $('#numCheckpoint').hide();
  });

更改了jQuery中的工作，希望你不介意......

新创建的元素

1 个答案: