Jquery用iframe替换特定图像

时间：2016-06-02 16:51:45

标签： jquery image iframe

我正在尝试为我工作的员工定制一个生物页面，我写的jQuery不起作用，我迷失了如何让它工作。员工BIOS从数据库中获取信息，在这些页面中是员工工作样本的缩略图，从数据库中获取他们的具体信息（例如“RobertThumb1.jpg”）。我不想在页面上重写html或php只是为了容纳一个员工，然后必须返回并为该字段修复1000+员工的数据库条目，所以我想使用jQuery替换他的缩略图他从网站上找到一个iframe，把他的音乐放在上面。我使用虚假信息（除了真正的iframe）制作了这个问题的一个小问题，你可以看到我在那里做了什么。 https://jsfiddle.net/0vfyduk2/12/

这是我小提琴的html：

<!--this works-->
<span id="phone"><strong>Phone:&nbsp; </strong>999-999-Robert</span>
<p>&nbsp;</p>
<!--this works-->
<a id="firstthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">Gary</a>
<p>&nbsp;</p>
<!--this is the one that my jquery isn't working on-->
<a id="secondthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"><img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"></a>
<p>&nbsp;</p>
<!--for the 4th one, which doesn't work either-->
<a id="thirdthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"><img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif"></a>

并且jQuery位于

之下 
$(document).ready(function() {

/*this works (if you remove my code below that does not work)*/
$('span#phone:contains("999-999-Robert")').html("<strong>Phone:&nbsp; </strong>222-333-9999");

/*this works (if you remove my code below that does not work)*/
$('a#firstthumb:contains("Gary")').html("bob");

/*this is what I need help with to make it work*/
$("a#secondthumb:contains('img[src*="profile-placeholder.gif"]')").html("<iframe width="100%" height="265" scrolling="no" frameborder="no" src="https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light" style="width:0px;min-width:100%;max-width:100%;"></iframe>");

/*this is a simplified version without the iframe code of what isn't working above, and it doesn't work either*/
$("a#thirdthumb:contains('img[src*="profile-placeholder.gif"]')").html("Larry");

});

jQuery专家可以弄清楚我做错了什么吗？我甚至无法让选择器甚至选择我想要选择的内容。

1 个答案:

答案 0 :(得分：0)

:contains()选择器主要用于文本内容而非实际选择器。如果您想以这种方式使用，只需按预期定位元素，然后设置它的内容：

// Find find all of the img tags that meet your criteria and replace the parents
$("a#secondthumb img[src*='profile-placeholder.gif']").each(function(){
    // Find the closest <a> tag and set the contents
    $(this).closest('a').html("<iframe width='100%' height='265' scrolling='no' frameborder='no' src='https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light' style='width:0px;min-width:100%;max-width:100%;'></iframe>");
});

同样，如果您只想更换图像本身，可以使用：

$("a#secondthumb img[src*='profile-placeholder.gif']").html(...);

此外，您似乎有一些与引用相关的混音（即未转义的引号或不匹配的单引号和双引号可能导致jQuery无法阅读您的内容。

示例

enter image description here

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!--this works-->
  <span id="phone"><strong>Phone:&nbsp; </strong>999-999-Robert</span>
  <p>&nbsp;</p>
  <!--this works-->
  <a id="firstthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">Gary</a>
  <p>&nbsp;</p>
  <!--this is the one that my jquery isn't working on-->
  <a id="secondthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
    <img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
  </a>
  <p>&nbsp;</p>
  <!--for the 4th one, which doesn't work either-->
  <a id="thirdthumb" target="_blank" href="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
    <img class="publicationthumbnails contrast2" style="width:19%; height:auto; float:left; margin-right:1%; padding:0;" src="http://www.corporatetraveller.ca/assets/images/profile-placeholder.gif">
  </a>
  <script>
    $(function() {
      /*this works (if you remove my code below that does not work)*/
      $('span#phone:contains("999-999-Robert")').html("<strong>Phone:&nbsp; </strong>222-333-9999");

      /*this works (if you remove my code below that does not work)*/
      $('a#firstthumb:contains("Gary")').html("bob");

      /*this is what I need help with to make it work*/
      $("a#secondthumb img[src*='profile-placeholder.gif']").each(function() {
        $(this).closest('a').html("<iframe width='100%' height='265' scrolling='no' frameborder='no' src='https://www.reverbnation.com/widget_code/html_widget/artist_2472492?widget_id=55&pwc[included_songs]=1&context_type=page_object&pwc[size]=small&pwc[color]=light' style='width:0px;min-width:100%;max-width:100%;'></iframe>");
      });

    });
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题