0

我有一个 Javascript 数组，如下所示：

var fruits=['apple','orange','peach','strawberry','mango']

我想在这些元素上添加一个事件，这些元素会给我的数据库带来多样性。例如“苹果”会给我

<div class="apple">golden</div>
<div class="apple">granny</div>
<div class="apple">canada</div>

此外，我的数据库中没有关于芒果品种的任何信息，我想从数组的其余部分中突出显示“芒果”。我已经创建了这样的类：

.black {
    color: black;
    pointer-events: none;
    cursor: default;
}

.couleur {
    color: blue;
}

我必须添加 HTML 代码吗？感谢您的帮助，这只是我在 stackoverflow 上的第二篇文章，对于奇怪的代码示例感到抱歉。

4

1 回答 1

0

好的，因为这是您的第二篇文章，我假设您对 Web 开发比较陌生。欢迎！

你的问题不是很清楚你想要发生什么，所以我首先假设简单：我们将创建一个 onclick 事件，对 php 脚本进行 AJAX 调用（你标记了 php，所以我假设你'重新编写 php 脚本），然后将结果显示在页面上的动态 div 中。

我将使用一些替代样式的 php 脚本，所以当你看到时不要害怕

if ($something):
    // do something
else:
    // do something else
endif;

首先，让我们设置我们的元素：

<?php
// Assume we already have the fruit categories stored in an array, $categories
// Display each fruit category on the page
foreach ($categories as $category) :
?>
    <div class='category' id='<?=$category?>'><?=$category?></div>

<?php
endforeach;
?>
<!-- empty placeholder div - this is where our results will go -->
<div id='results'></div>

这将显示我们希望在页面上启动的所有元素。如果您想根据类别类设置这些元素的样式，请继续。

接下来我们需要编写一些 javascript 来确定 onClick 行为。为此，我们可以使用直接的 javascript，或者我们可以使用 jQuery（这在今天非常流行 - 阅读它，并不难掌握）。

<script type='text/javascript' language='javascript'>
    $('.category').click(function() {
        // grab the category (based on the id of the element) and send it to our background page
        var category = $(this).id();
        $.post('backgroundScript.php', 
            {
                type: category
            }, 
            function(data) {
                // print the results inside the #results div
                $('#results').html(data);
            }
        );
    });        
</script>

最后，我们需要一个后台脚本来处理我们的数据并返回我们的结果。

<?php
//backgroundScript.php

$type = $_POST['type'];

// pass $type in to the database and perform some joins to get the subcategories in an array,
// then present a list of subcategories
$subcategories = findSubCategoriesInDB($type);

if (count($subcategories)) {
    echo "<ul>";
    foreach ($subcategories as $subcat) {
        echo "<li>" . $subcat . "</li>";
    }
    echo "</ul>";
} else {
    echo "No subcategories were found for " . $type;
}
于 2012-07-25T13:48:05.380 回答