Question

我正在尝试通过单个下拉列表动态加载多个iframe，并将该iframe分组，这意味着如果我在下拉列表中选择一个项目，则该项目应显示该iframe组，但是我无法使其正常工作，这就是方法我编码了：

HTML
<select id="color"> 
<option label="red" id="red" value="http://red></option>
<option class="hide" id="red1" value="http://red1></option>

<option label="blue" id="blue" value="http://blue></option>
<option class="hide" id="blue1" value="http://blue1></option>

</select>

<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

JQUERY

$(document).ready(function(){
   $("color").change(function(){

   $("#iframeId").attr("src",$("this").attr("color:selected")val());
   $("#iframeId1").attr("src",$("this").attr("color:selected")val());

  });
 });

任何想法，出了什么问题？

Answer 1

public class Cone implements Eatable {
    //The types of flavors
    public enum Flavors {
        STRAWBERRY,
        BANANA,
        CHOCOLATE,
        VANILLA,
        LEMON,
        STRACIATELLA,
        MOKKA,
        PISTACHE
    }

    //The field
    private Flavors[] balls;

    //The constructors
    //Constructor Basic
    public Cone() {
        balls = new Flavors[0];
    }

    //Constructor with Flavors
    public Cone(Flavors[] balls) {
        this.balls = balls;
    }

    //The methods
    //You should always use getters and setters
    //https://stackoverflow.com/questions/1568091/why-use-getters-and-setters-accessors

    //Getter
    public Flavors[] getBalls() {
        return balls;
    }

    //Setter
    public void setBalls(Flavors[] balls) {
        this.balls = balls;
    }

    //Your method from UML
    @Override
    public void eat() {
        //Whatever
    }
}

Answer 2

Insert paired brackets (), [], {}, <>

 $(document).ready(function(){
    $("#color").change(function(){
      $("#iframeId").attr("src",$('#color option:selected').val());
     $("#iframeId1").attr("src",$('#color option:selected').val());
    });
  });

您必须将jquery代码更改为以下

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<select id="color"> 
      <option label="red" id="red" value="https://www.youtube.com/embed/PCwL3-hkKrg"> red</option>

      <option label="blue" id="blue" value="https://www.youtube.com/embed/EngW7tLk6R8"> blue</option>
  </select>
<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

Answer 3

从@skipperhoa的答案中整理脚本部分。

$(document).ready(function() {      				
	$("#color").change(function() {
		$('#iframeId').attr('src', $(this).find('option:selected').val());
		$('#iframeId1').attr('src', $(this).find('option:selected').next().val());        
	});
	$("#color").change();
});

function addIframe() {
	var src = 'https://ping.eu/ping/';
	$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertAfter($('iframe:last').parent());
}
function addIframeBefore(id) {
	var src = 'https://ping.eu/ping/';
	$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertBefore($(id).parent());
}
function addIframeafter(id) {
	var src = 'https://ping.eu/ping/';
	$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertAfter($(id).parent());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="button" value="Add New iframe after last iframe" onclick="addIframe()">
<input type="button" value="Add New iframe before iframe1" onclick="addIframeBefore('#iframeId1')">
<input type="button" value="Add New iframe after iframe1" onclick="addIframeafter('#iframeId1')">
<select id="color"> 
	<option label="red" id="red" data-id="red" value="https://router.vuejs.org/api/#component-injected-properties"></option> 
	<option class="hide" id="red1" value="https://router.vuejs.org/guide/#html"></option>
	<option label="blue" id="blue" value="https://api.jquery.com/each/"></option>
	<option class="hide" id="blue1" value="https://ping.eu/ping/"></option>
</select>

<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

jQuery，如何动态加载iframe组？

3 个答案: