Question

我有以下问题。我尝试使用AJAX和data-value attribute加载一些内容来加载div中的内容。我已设置console.log以显示链接的data-value。因此，如果您点击Populair，则console.log会显示populair。但它只显示我点击的第一个项目。第一次点击后，它不再做任何事情了。

我猜它与存储在某个地方的数据有关。我已尝试removeData()并清空a.themafeesten元素，但这会删除链接（包括文字）。

这是我的HTML

<article>
    <h1>Themafeesten</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Evolvendis peccandi assentior istam alia divitiarum laetamur acutum. Amatoriis hosti notissima arridens simulent fuisse cumanum vocet factorum, inanitate convicia prohiberet tuo, istam duxit facta, involuta numquid vos causae putent malint arbitrarer occulte maximasque, doctrinis tradere idque indicaverunt similia suspicor, excelsus liberavisse virtutum eximiae emolumenti probarentur plus. Scaevolam gravioribus multis venandi. Sanguinem consule atomis dicturam inculta exaudita, capti pecuniae intellegerem scribimus meque sensuum debitis, dubium domus. In ferae morbis dixit impedit conectitur quodsi.</p>
            <ul class="select-feestthema tk-proxima-nova">
                <li><a class="themafeest" href="#" data-value="populair">Populair</a></li>
                <li><a class="themafeest" href="#" data-value="zomer">Zomer</a></li>
                <li><a class="themafeest" href="#" data-value="winter">Winter</a></li>
                <li><a class="themafeest" href="#" data-value="terug in de tijd">Terug in de tijd</a></li>
                <li><a class="themafeest" href="#" data-value="film en tv">Film en TV</a></li>
                <li><a class="themafeest" href="#" data-value="land en regios">Land en regio's</a></li>
                <li><a class="themafeest" href="#" data-value="dinnershows">Dinnershows</a> </li>
            </ul>
    <div id="data_goes_here"></div>
</article>

我的AJAX功能：

$(document).ready(function()  {
        $('a.themafeest').click(function() {
            var datalist = $(this).data().value;
            $.ajax({
                type: "POST",
                url: "/puurfeesten/wp-content/themes/puurfeesten-theme/change-loop.php",
                data:datalist,
                success: function(response) {
                    if ($("#data_goes_here").html() != response) {
                        $("#data_goes_here").fadeOut(200, function() {
                            $("#data_goes_here").html(response); 
                            $("#data_goes_here").fadeIn();
                            console.log(datalist);
                        });
                    }
                }
            });
            return false;
        });

    });

change-loop.php此时只显示hello。我一步一个脚印。所以我想让名字显示正确。从那里拿走它。

有谁知道如何解决这个问题？提前谢谢！

Answer 1

基本上你的代码没有问题，你使用的静态测试数据让你很困惑。如果您的“change_loop.php”总是返回“hello”，如您所述，则在第二次单击时，您的语句

if ($("#data_goes_here").html() != response) {

将“hello”与“hello”匹配，并决定不输入“if”块。这将导致fade函数无法触发，这反过来意味着console.log将无法运行。这让你看起来没有任何事情发生，但事实并非如此。

简单的解决方法是将console.log移到ajax调用之外，以便在ajax启动之前运行。或者，您可以使PHP更复杂，至少返回一些不同的测试数据，具体取决于发送给它的数据值。

然而，IMO你做得更好的是一种稍微不同的方法：在变量中记录当前显示的项目，并在每次“点击”事件触发时测试它，这样你就不会浪费ajax调用重新加载已经显示的内容。在您发出请求，然后丢弃内容之后，您只是浪费带宽和CPU时间。

Answer 2

您从未看到所选值的原因是因为在change-loop.php您echo "hello"并且在任何给定时间都不会更改，您需要回显来自请求的数据。这样你就会看到变化。

在@ADyson上添加更多评论：

或者，你可以使PHP更复杂，至少返回一些不同的测试数据取决于发送给它的数据值。

让php返回发送给它的值。

<script>

    $(document).ready(function()  {
        $('a.themafeest').click(function() {
            var datalist = $(this).data().value;
            $.ajax({
                type: "POST",
                url: "/puurfeesten/wp-content/themes/puurfeesten-theme/change-loop.php",
                data:{datalist:datalist},
                success: function(response) {
                            if ($("#data_goes_here").html() != response) {
                            $("#data_goes_here").fadeOut(200, function() {
                            $("#data_goes_here").html(response); 
                            $("#data_goes_here").fadeIn();
                            console.log(datalist);
                        });
                    }
                }
            });
            return false;
        });

    });
</script>

然后在change-loop.php

<?php

    echo $_POST['datalist'];

    ?>

Answer 3

这是你在找什么？让我们一步一步地了解其破裂的原因和原因。请尝试以下代码：

＆＃13;

$(document).ready(function()  {
        $('a.themafeest').click(function() {
            var datalist = $(this).data('value');
            console.log(datalist);
            /*$.ajax({
                type: "POST",
                url: "/puurfeesten/wp-content/themes/puurfeesten-theme/change-loop.php",
                data:datalist,
                success: function(response) {
                            if ($("#data_goes_here").html() != response) {
                            $("#data_goes_here").fadeOut(200, function() {
                            $("#data_goes_here").html(response); 
                            $("#data_goes_here").fadeIn();
                            console.log(datalist);
                        });
                    }
                }
            });*/
            return false;
        });

    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
    <h1>Themafeesten</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Evolvendis peccandi assentior istam alia divitiarum laetamur acutum. Amatoriis hosti notissima arridens simulent fuisse cumanum vocet factorum, inanitate convicia prohiberet tuo, istam duxit facta, involuta numquid vos causae putent malint arbitrarer occulte maximasque, doctrinis tradere idque indicaverunt similia suspicor, excelsus liberavisse virtutum eximiae emolumenti probarentur plus. Scaevolam gravioribus multis venandi. Sanguinem consule atomis dicturam inculta exaudita, capti pecuniae intellegerem scribimus meque sensuum debitis, dubium domus. In ferae morbis dixit impedit conectitur quodsi.</p>
            <ul class="select-feestthema tk-proxima-nova">
                <li><a class="themafeest" href="#" data-value="populair">Populair</a></li>
                <li><a class="themafeest" href="#" data-value="zomer">Zomer</a></li>
                <li><a class="themafeest" href="#" data-value="winter">Winter</a></li>
                <li><a class="themafeest" href="#" data-value="terug in de tijd">Terug in de tijd</a></li>
                <li><a class="themafeest" href="#" data-value="film en tv">Film en TV</a></li>
                <li><a class="themafeest" href="#" data-value="land en regios">Land en regio's</a></li>
                <li><a class="themafeest" href="#" data-value="dinnershows">Dinnershows</a> </li>
            </ul>
    <div id="data_goes_here"></div>
</article>

＆＃13;

使用data-value属性选择并回显.php文件

3 个答案: