removeChild之后的onclick动作

Question

我使用以下html：

<div id="container">
  <div id="buttons">
    <h1><?php echo $intro_header;?></h1>
    <p>
      <?php echo $intro_tekst;?>
    </p>
    <div class="strip">
      <div>
        <a id="myHeader1" onclick="javascript:showonlyone('newboxes1'); $('html, body').animate({scrollTop:$('#mydiv1').offset().top}, 'slow');">
          <?php echo $header_item1;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader2" onclick="javascript:showonlyone('newboxes2'); $('html, body').animate({scrollTop:$('#mydiv2').offset().top}, 'slow');">
          <?php echo $header_item2;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader3" onclick="javascript:showonlyone('newboxes3'); $('html, body').animate({scrollTop:$('#mydiv3').offset().top}, 'slow');">
          <?php echo $header_item3;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader4" onclick="javascript:showonlyone('newboxes4'); $('html, body').animate({scrollTop:$('#mydiv14').offset().top}, 'slow');">
          <?php echo $header_item4;?>
        </a>
      </div>
    </div>
    <div id="mydiv1"> </div>
    <div id="mydiv2"> </div>
    <div id="mydiv3"> </div>
    <div id="mydiv4"> </div>
  </div>
  <div class="newboxes" id="newboxes1">
    <div class="fragment">
      <div class="row">
        <div id="close1">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item1;?></h1>
          <p>
            <?php echo $artikel_item1;?>
          </p>
        </div>
        <div id="newimage"><img src="<?php echo $image_item1;?>"></div>
      </div>
    </div>
  </div>


  <div class="newboxes" id="newboxes2">
    <div class="fragment">
      <div class="row">
        <div id="close2">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item2;?></h1>
          <p>
            <?php echo $artikel_item2;?>
          </p>
        </div>
        <div id="newimage"><img src="<?php echo $image_item2;?>"></div>
      </div>
    </div>
  </div>

  <div class="newboxes" id="newboxes3">
    <div class="fragment">
      <div class="row">
        <div id="close3">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item3;?></h1>
          <p>
            <?php echo $artikel_item3;?>
          </p>
        </div>
        <div id="newimage"><img src="<?php echo $image_item3;?>"></div>
      </div>
    </div>
  </div>

  <div class="newboxes" id="newboxes4">
    <div class="fragment">
      <div class="row">
        <div id="close4">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item4;?></h1>
          <p>
            <?php echo $artikel_item4;?>
          </p>
        </div>
        <div id="newimage"><img src="<?php echo $image_item4;?>"></div>
      </div>
    </div>
  </div>
  <!--   
    <div id="onder"></div>
    -->
</div>

我正在展示并隐藏带有成功的新盒子。唯一的问题是我想要div中的结束标记。我已经制作了一个，但是当我点击它时，显示/隐藏功能不再起作用了。过去两天我搜索没有运气。

这是javascript：

// JavaScript Document

function showonlyone(thechosenone) {    
    $('.newboxes').each(function(index) {
        if ($(this).attr("id") === thechosenone) {
            $(this).show(200);
        } else {    
            $(this).hide(600);    
        }    
    });    
}

window.onload = function(){
    document.getElementById('close1').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
     document.getElementById('close2').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
     document.getElementById('close3').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
         document.getElementById('close4').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
};

测试网站位于www。http://fitter.byantoinette.nl/

＆＃13;

＆＃13;

    function showonlyone(thechosenone) {
      $('.newboxes').each(function(index) {
        if ($(this).attr("id") === thechosenone) {
          $(this).show(200);
        } else {
          $(this).hide(600);
        }
      });
    }

    window.onload = function() {
      document.getElementById('close1').onclick = function() {
        this.parentNode.parentNode.parentNode
          .removeChild(this.parentNode.parentNode);
        return false;
      };
      document.getElementById('close2').onclick = function() {
        this.parentNode.parentNode.parentNode
          .removeChild(this.parentNode.parentNode);
        return false;
      };
      document.getElementById('close3').onclick = function() {
        this.parentNode.parentNode.parentNode
          .removeChild(this.parentNode.parentNode);
        return false;
      };
      document.getElementById('close4').onclick = function() {
        this.parentNode.parentNode.parentNode
          .removeChild(this.parentNode.parentNode);
        return false;
      };
    };

＆＃13;

<div id="container">
  <div id="buttons">
    <h1><?php echo $intro_header;?></h1>
    <p>
      <?php echo $intro_tekst;?>
    </p>
    <div class="strip">
      <div>
        <a id="myHeader1" onclick="javascript:showonlyone('newboxes1'); $('html, body').animate({scrollTop:$('#mydiv1').offset().top}, 'slow');">
          <?php echo $header_item1;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader2" onclick="javascript:showonlyone('newboxes2'); $('html, body').animate({scrollTop:$('#mydiv2').offset().top}, 'slow');">
          <?php echo $header_item2;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader3" onclick="javascript:showonlyone('newboxes3'); $('html, body').animate({scrollTop:$('#mydiv3').offset().top}, 'slow');">
          <?php echo $header_item3;?>
        </a>
      </div>
    </div>
    <div class="strip">
      <div>
        <a id="myHeader4" onclick="javascript:showonlyone('newboxes4'); $('html, body').animate({scrollTop:$('#mydiv14').offset().top}, 'slow');">
          <?php echo $header_item4;?>
        </a>
      </div>
    </div>
    <div id="mydiv1"></div>
    <div id="mydiv2"></div>
    <div id="mydiv3"></div>
    <div id="mydiv4"></div>
  </div>
  <div class="newboxes" id="newboxes1">
    <div class="fragment">
      <div class="row">
        <div id="close1">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item1;?></h1>
          <p>
            <?php echo $artikel_item1;?>
          </p>
        </div>
        <div id="newimage">
          <img src="<?php echo $image_item1;?>">
        </div>
      </div>
    </div>
  </div>


  <div class="newboxes" id="newboxes2">
    <div class="fragment">
      <div class="row">
        <div id="close2">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item2;?></h1>
          <p>
            <?php echo $artikel_item2;?>
          </p>
        </div>
        <div id="newimage">
          <img src="<?php echo $image_item2;?>">
        </div>
      </div>
    </div>
  </div>

  <div class="newboxes" id="newboxes3">
    <div class="fragment">
      <div class="row">
        <div id="close3">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item3;?></h1>
          <p>
            <?php echo $artikel_item3;?>
          </p>
        </div>
        <div id="newimage">
          <img src="<?php echo $image_item3;?>">
        </div>
      </div>
    </div>
  </div>

  <div class="newboxes" id="newboxes4">
    <div class="fragment">
      <div class="row">
        <div id="close4">x</div>
        <div id="newtekst">
          <h1><?php echo $header_item4;?></h1>
          <p>
            <?php echo $artikel_item4;?>
          </p>
        </div>
        <div id="newimage">
          <img src="<?php echo $image_item4;?>">
        </div>
      </div>
    </div>
  </div>
  <!--   
    <div id="onder"></div>
    -->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，正如mplingjan所说，请清理你的代码 我为你做了，我在一些章节中更改了你的代码以使其正常工作 我拿了你的第一个和第二个代码。问题在于删除元素 不要忘记将索引变量更改为数组。我用了数组代替      $header_item1,2,3,4 -> $header_item[]

<div id="container">
    <div id="buttons">
        <h1>
            <?php echo $intro_header;?>
        </h1>
        <p>
            <?php echo $intro_tekst;?>
        </p>
        <?php foreach([1,2,3,4] as $i) { ?>
        <div class="strip">
            <div>
                <a id="myHeader<?=$i?>" onclick="javascript:showonlyone('newboxes<?=$i?>'); $('html, body').animate({scrollTop:$('#mydiv<?=$i?>').offset().top}, 'slow');">
                    <?php echo $header_item[$i];?>
                    <!-- change $header_item1,2,3,4 to array of $header_item -->
                </a>
            </div>
        </div>
        <?php } ?>
        <?php foreach([1,2,3,4] as $i) { ?>
        <div id="mydiv<?=$i?>">
        </div>
        <?php } ?>
    </div>
    <?php foreach([1,2,3,4] as $i) { ?>
    <div class="newboxes" id="newboxes<?=$i?>">
        <div class="fragment">
            <div class="row">
                <div id="close<?=$i?>">
                    x
                </div>
                <div id="newtekst">
                    <h1>
                        <?php echo $header_item[$i];?>
                    </h1>
                    <p>
                        <?php echo $artikel_item[$i];?>
                    </p>
                </div>
                <div id="newimage">
                    <img src="<?php echo $image_item[$i];?>"/>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    <!--   
<div id="onder"></div>
-->
</div>
<script type="text/javascript">
    function showonlyone(thechosenone) {
        $('.newboxes').each(function(index) {
              if ($(this).attr("id") === thechosenone) {
                  $(this).show(200);
              }
              else {
                   $(this).hide(600);
              }
         });
    }


$(function(){
    <?php foreach([1,2,3,4] as $i) { ?>
        $('#close<?=$i?>').click(function(){
            $(this).closest('.newboxes').hide(); 

        });
    <?php } ?>
});

// window.onload = function(){
//     document.getElementById('close1').onclick = function(){
//         this.parentNode.parentNode.parentNode
//         .removeChild(this.parentNode.parentNode);
//         return false;
//     };
//      document.getElementById('close2').onclick = function(){
//         this.parentNode.parentNode.parentNode
//         .removeChild(this.parentNode.parentNode);
//         return false;
//     };
//      document.getElementById('close3').onclick = function(){
//         this.parentNode.parentNode.parentNode
//         .removeChild(this.parentNode.parentNode);
//         return false;
//     };
//          document.getElementById('close4').onclick = function(){
//         this.parentNode.parentNode.parentNode
//         .removeChild(this.parentNode.parentNode);
//         return false;
//     };
// };

</script>

<强> BUT 这只是改变您的代码工作，但不是我的首选代码，下面的代码在某些部分进行了调整。例如，当你拥有JQuery的强大功能时，不需要在90％的实现中使用ID。 检查一下：

<div id="container">
    <div id="buttons">
        <h1>
            <?php echo $intro_header;?>
        </h1>
        <p>
            <?php echo $intro_tekst;?>
        </p>
        <?php foreach([1,2,3,4] as $i) { ?>
        <div class="strip">
            <div>
                <a class="headerLink" data-boxId="newboxes<?=$i?>">
                    <?php echo $header_item[$i];?> <!-- change $header_item1,2,3,4 to array of $header_item -->
                </a>
            </div>
        </div>
        <?php } ?>
        <?php foreach([1,2,3,4] as $i) { ?>
        <div id="mydiv<?=$i?>">
        </div>
        <?php } ?>
    </div>
    <?php foreach([1,2,3,4] as $i) { ?>
    <div class="newboxes" id="newboxes<?=$i?>">
        <div class="fragment">
            <div class="row">
                <div class="closer">
                    x
                </div>
                <div id="newtekst">
                    <h1>
                        <?php echo $header_item[$i];?>
                    </h1>
                    <p>
                        <?php echo $artikel_item[$i];?>
                    </p>
                </div>
                <div id="newimage">
                    <img src="<?php echo $image_item[$i];?>"/>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
    <!--   
<div id="onder"></div>
-->
</div>
<script type="text/javascript">


$(function(){
        $('.headerLink').click(function(){
            $('.newboxes').hide(600);
            $('#' + $(this).attr('data-boxId')).show(200);
        });

        $('.closer').click(function(){
            $(this).cloesest('.newboxes').hide(600);
        });
});


</script>