Question

使用JS，Jquery，Bootstrap 3.我没有创建多个单独触发的模态，而是编写了一个脚本来根据嵌入的内容填充模态，然后用嵌入的内容填充模态。

模态标记：

<div class="modal fade" id="ideasmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body" id="library-content"></div>
</div>
</div>
</div>

触发器：

<a data-frame="http://path.to.url" data-content="embed" class="btn btn-primary modaltrigger" role="button">Learn More</a>
<a data-frame="http://path/to/image.png" data-content="image" class="btn btn-primary modaltrigger" role="button">Learn More</a>

JS

$(document).ready(function(){
$( ".modaltrigger" ).click(function(){
    var dataContent = this.getAttribute("data-content");
    if (dataContent = "embed") {
        var modalClass = 'embed-responsive embed-responsive-16by9';
        var modalContent = this.getAttribute("data-frame");
        var modalBody = document.createElement("IFRAME");
        var embedContainer = document.createElement("DIV");
        embedContainer.setAttribute("class", modalClass);
        modalBody.setAttribute("src", modalContent)
        modalBody.setAttribute("class", "embed-responsive-item");
        modalBody.setAttribute( "frameborder", "0");
        document.getElementById("library-content").appendChild(embedContainer);
        embedContainer.appendChild(modalBody);
        $('#ideasmodal').modal('show');
    }
    else if (dataContent = "image") {
        var modalContent = this.getAttribute("data-frame");
        var modalBody = document.createElement("IMG");
        modalBody.setAttribute("src", modalContent);
        modalBody.setAttribute("class", "img-responsive");
        document.getElementById("library-content").appendChild(modalBody);
        $('#ideasmodal').modal('show');
    }
});
$( ".close").click(function(){
    document.getElementById("library-content").innerHTML= "";
});
});

因此，当我点击带有data-content =＆＃34;图像＆＃34;的链接时，现场网站上发生了什么，该网站仍在生成iframe而不是直接嵌入图片（我的if语句的ELSE）。这不是什么大不了的事，除了我不想被限制在bootstrap的响应式嵌入类所定义的比例之外 - 我的图像并不总是适合4：3或16： 9比率。

我对JS很新，所以如果我错过了一些非常明显的东西，请道歉。我已经用控制台/调试器运行了这个并且我没有得到任何错误，除了toString是不允许的（从搜索这个网站我可以看到它现在忽略它，因为它＆＃ 39;一个Flash问题）。

Answer 1

你的两个陈述中只有1个等于

if (dataContent == "embed") {
    //logic
} else if (dataContent == "image") {
    //logic
}

Answer 2

应为== not =。

if (dataContent == "embed") {
    var modalClass = 'embed-responsive embed-responsive-16by9';
    var modalContent = this.getAttribute("data-frame");
    var modalBody = document.createElement("IFRAME");
    var embedContainer = document.createElement("DIV");
    embedContainer.setAttribute("class", modalClass);
    modalBody.setAttribute("src", modalContent)
    modalBody.setAttribute("class", "embed-responsive-item");
    modalBody.setAttribute( "frameborder", "0");
    document.getElementById("library-content").appendChild(embedContainer);
    embedContainer.appendChild(modalBody);
    $('#ideasmodal').modal('show');
}
else if (dataContent == "image") {

=用于赋值==用于比较。

我的JS if语句有问题吗？

2 个答案: