jquery - add a class to iframe and select that class to display iframe

Question

i have a jquery code that creates iframes base on how many records the code finds, a button that onclick re size the iframe, what i am trying to do is add a class to the iframe, so that i can only show the iframe the click on. this is the code that i have, but it keeps showing all the iframes

$("<iframe />" , {
        src: strTest,
        id: "myframe",
        width: '100%'       

    }).appendTo('.content');
    $("<button/>", {
      align: "center"
    })
    .text("Select Patient")    
    .click(function () { $("#myframe").attr("Height", "125%").addClass("selectedIframe"); }).appendTo('.content');
    $(".selectedIframe", window.parent).show();
  $("<hr />").appendTo('.content');
}

can somebody help me or point me to the right direction thanks

Answer 1

似乎您需要在创建 iframe 时添加该类：

$("<iframe />" , {
        src: strTest,
        id: "myframe",
        width: '100%'       

    }).appendTo('.content').addClass("selectedIframe");

而不是你现在正在做的地方（在点击处理程序中）。

Answer 2

您可以在创建元素时添加类和内容等内容，如果使用变量，则可以在以后的函数中引用元素：

var iframe = $("<iframe />" , {src    : strTest, 
                               id     : "myframe", 
                               width  : '100%', 
                               'class': 'myIframe'
             }),
    button = $("<button />", {style: 'margin: 0 auto; position: relative',
                              text : 'Select Patient'
             });

$('.content').append(iframe, button);

button.on('click', function() {
    iframe.css({height: '125%'}).addClass('selectedIframe');
});

$(".selectedIframe", window.parent).show();
$("<hr />").appendTo('.content');

请注意，class使用这种方式应该被引用，因为它是一个保留的 javascript 关键字。

Answer 3

您需要为每个帧指定一个唯一的 ID。目前，您的代码似乎总是创建具有相同 id 的帧 -myframe

您可能可以通过$(this)在这行代码上使用来操纵它：

$(this).attr("Height", "125%").addClass("selectedIframe");

Answer 4

尝试使用 onClick ：

var iframe = $("<iframe />" , {src    : strTest, 
                               id     : "myframe", 
                               width  : '100%', 
                               onclick: function(){ $(this).addClass('myIframe'); }
             }),
    button = $("<button/>", {style: 'margin: 0 auto; position: relative',
                             text : 'Select Patient'
             });

$('.content').append(iframe, button);

button.on('click', function() {
    iframe.css({height: '125%'}).addClass('selectedIframe');
});

$(".selectedIframe", window.parent).show();
$("<hr />").appendTo('.content');