Question

我有一个图像搜索按钮的div类：

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        function myFunction() {

        <?php
            $link = "https://source.unsplash.com/all/?";
            $c=$link.$article->title;
            ?>
         document.getElementById("demo").innerHTML ="
        <?php echo "
            <img src=".$c." height='100' width='100'/>"?>"
        }

    </script>
</div>

如果我点击此按钮，我会通过我的关键字从此网址获取图片：

https://source.unsplash.com/all/?

但如果我想通过点击此按钮选择其他图像，我必须刷新我的页面。所以问题是：我是否可以通过单击相同的搜索按钮来选择没有页面刷新的其他图像？抱歉我的英文。

Answer 1

为了简单起见，我们假设您有一个名为$articleList的变量，其中包含您的每个$article个对象

<div class="form-group">
     <button onclick="myFunction()">Click me</button>
     <p id="demo"></p>
     <script>
         var articleList = <?php echo json_encode($articleList); ?>;
         var counter = 0;
         var link = "https://source.unsplash.com/all/?";
         function myFunction() {
             var c = link + articleList[counter++].title;
             document.getElementById("demo").innerHTML = "<img src=" + c + " height='100' weidth='100'/>";
         }
     </script>
 </div>

Answer 2

重新评估您的问题，这似乎更像是一个缓存问题。我仍会保留我以前的答案，因为它可能对其他人有帮助。如下所示，尝试在网址中添加时间戳，应为您提供新图片：

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        var link = "https://source.unsplash.com/all/?";
        var articleTitle = <?php echo "'" . $article->title . "'"; ?>;
        function myFunction() {
            var d = new Date();
            var c = link + articleTitle + "&" + d.getTime();
            document.getElementById("demo").innerHTML = "<img src=" + c + " height='100' width='100'/>";
        }

    </script>
</div>

通过按钮单击刷新图像，无需刷新页面

2 个答案: