Question

我正在尝试从我的文件系统预览文件，预览适用于第一次点击，但在点击不同的元素后它永远不会更新。我认为删除和附加功能可能有问题。这是我的JS代码

function myFunction1(index) {
    var parent = $('embed#demo').parent();
    if (index == '0') {
        var newElement = " <div class = 'relative'> <embed
                src='http://localhost:8080//Part2/sample2.pdf' width='500' height='600'>
                </div>";
    }
    if (index == '1') {
        var newElement = " <div class = 'relative'> <embed
                src='http://localhost:8080//Part2/Capture.PNG' width='500' height='600'>
                </div>";
    }
    $('embed#demo').remove();
    parent.append(newElement);
}
event.stopPropagation();
event.preventDefault();

这是html部分：

<div class="panel-body" onclick="return myFunction1('0')">Panel Body</div>
<div class="panel-footer" onclick="return myFunction1('1')">Panel 
Footer</div>

这是embed元素 <embed id = "demo">

Answer 1

这个脚本有几个问题可能是原因：

使用onclick属性订阅的活动 - 使用$('.panel-body').click(...)代替
包含'的HTML属性，例如<div class = 'relative'> - HTML需要"，因此在JS中的字符串周围使用'
<embed>标记已弃用，并且可能会因浏览器而异常不同。对于PDF，只需使用<iframe>
您期望event.stopPropagation(); event.preventDefault();做什么？这可以通过直接订阅来停止事件，但是您的onclick属性正在直接调用该函数，因此它们永远不会到达。
来源为http，如果您的网站是通过https访问的，该来源将被屏蔽。

把它们放在一起：

function myFunction1(index) {
    var parent = $('#demo').parent();
    if (index == '0') {
        var newElement = `<div class ="relative"> <iframe
                src="https://localhost:8080//Part2/sample2.pdf" width=500 height=600>
                </div>`;
    }
    if (index == '1') {
        var newElement = `<div class ="relative"> <iframe
                src="https://localhost:8080//Part2/Capture.PNG" width=500 height=600>
                </div>`;
    }
    $('#demo').remove();
    parent.append(newElement);
}

$('.panel-body').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  myFunction1('0');
});

$('.panel-footer').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
  myFunction1('1');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="panel-body">Panel Body</button>
<button class="panel-footer">Panel 
Footer</button>

This is the element <div id = "demo"></div>

Answer 2

请尝试这个。

<div class="panel-body" onclick="return myFunction1('0')">Panel Body</div>
<div class="panel-footer" onclick="return myFunction1('1')">Panel Footer</div>
<div class="parent"><div id="demo"></div></div>
<script>
    function myFunction1(index) {
        var parent = $('#demo');
        if (index == '0') {
            var newElement = " <div class = 'relative'><h1>first</h1></div>";
        }
        if (index == '1') {
            var newElement = " <div class = 'relative'><h1>second</h1></div>";
        }
        $(parent).html('');
        parent.append(newElement);
    }
</script>

$（元素）.remove＆amp;＆amp;追加（元素）不起作用

2 个答案: