Question

我已经编写了这段代码并且工作正常：

HTML：

<div class="service-box">
  <!--Services Title 1-->
  <h3>WordPress installation</h3>
  <!--Content for title 1-->
  <div class="service-content">
   <!--Your youtube service video iframe code-->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
    <!--Your service description-->
    <p>I am offering services like:</p> 
    <p>WordPress installation to your already purchased domain and hosting.</p>
    <p>Also I am able to create subdomain and install wordpress on it.</p>
    <p>If You need me to make a WP backup, I can do that for You.</p>
    <p>In case that You need me to restore your website from my previously made backup I am here for You.</p>      
  </div>

JS：

$(document).on('click', '.service-box', function(){                    
    $('#siteOverlay').addClass('overlay-active');
    $('#popupWindow').addClass('service-active');
    $('#popupWindow #contentBox').html($(this).html());   //I will change this line
    $('body').css('overflow', 'hidden');
});

然后我尝试选择除IFRAME标签之外的所有内容：

 $('#popupWindow #contentBox').html($(this).not($('iframe')).html());

或者像这样：

$('#popupWindow #contentBox').html($(this).not('iframe').html());

并且它不起作用。我也尝试过使用：不是像这样的所有组合中的选择器：

$('#popupWindow #contentBox').html($(this:not).html());

什么都没有用。有谁知道答案吗？谢谢！

Answer 1

您想要从点击元素的html中删除iframe，而不是从点击的元素本身中删除iframe。所以....你必须克隆它并从克隆中删除它，然后附加它。

var clone = $(this).clone();
clone.find('iframe').remove();
$('#popupWindow #contentBox').html(clone.contents());

Answer 2

这是你想要的吗？

var clone = $(this).clone();
clone.find('iframe').remove();
$('#contentBox').empty().append(clone);

$(document).on('click', '.service-box', function() {
  $('#siteOverlay').addClass('overlay-active');
  $('#popupWindow').addClass('service-active');
  var clone = $(this).clone();
  clone.find('iframe').remove();
  $('#contentBox').empty().append(clone);
  $('body').css('overflow', 'hidden');
});

#siteOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}

#siteOverlay.overlay-active {
  display: block;
}

#popupWindow {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background-color: white;
  padding: 50px;
  overflow-y: scroll;
}

#contentBox {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-box">
  <!--Services Title 1-->
  <h3>WordPress installation</h3>
  <!--Content for title 1-->
  <div class="service-content">
    <!--Your youtube service video iframe code-->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
    <!--Your service description-->
    <p>I am offering services like:</p>
    <p>WordPress installation to your already purchased domain and hosting.</p>
    <p>Also I am able to create subdomain and install wordpress on it.</p>
    <p>If You need me to make a WP backup, I can do that for You.</p>
    <p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
  </div>
</div>
<div id="siteOverlay">
  <div id="popupWindow">
    <div id="contentBox"></div>
  </div>
</div>

使用$（this）和.not选择iframe以外的所有内容

2 个答案: