java - 在 js/php 范围内，什么是更好的选择/目标概念-6ren

java - 在 js/php 范围内，什么是更好的选择/目标概念

转载作者：行者123 更新时间：2023-12-02 09:27:14

24

4

我对这段代码的问题是在第二次单击时它取消选择所有内容并且不选择特定项目。我知道这是因为 item_'.$x.'Active 即使我有 selectorReset() 函数，它也不一定会重置每个单独 Activity 返回的值到0。

我知道这是糟糕的编码，有人可以启发我更好的解决方案来实现这种功能吗？ ^_^

示例:单击项目 0，然后单击项目 1(按预期工作正常)但如果我返回单击第 0 项，激活器将设置为 1，这意味着功能选择器中的 else 将使用重置功能激活，因此不会选择任何内容。问题:如何保持选中状态？解决方案:一种解决问题的简单方法哈哈，或者有人可以提出一个已知的概念吗？谢谢^_^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="area">
    <?php
        $x=0;
        while($x!=10){
            echo'
                <div id="item_'.$x.'" class="area__item" onclick="selector'.$x.'()">
                '.$x.'
                </div>
                <script>
                    var item_'.$x.'Active = 0;
                    var item_'.$x.' = document.getElementById("item_'.$x.'");
                    function selector'.$x.'(){
                        if(item_'.$x.'Active == 0){
                            selectorReset();
                            item_'.$x.'.style.backgroundColor = "pink";
                            item_'.$x.'Active = 1;
                        }else{
                            selectorReset();
                            item_'.$x.'.style.backgroundColor = "";
                            item_'.$x.'Active = 0;
                        }
                    }
                </script>
            ';
            $x++;
        }
    ?>
    <script>
        var item = document.getElementsByClassName("area__item");
        function selectorReset(){
            for(var i=0;i<item.length;i++){
                item[i].style.backgroundColor="";
            }
        }
    </script>
    </div>
    <style>
        .area{
            display:flex;
            flex-wrap:wrap;
            width:100%;
        }
        .area__item{
            display:flex;
            justify-content:center;
            align-items:center;
            height:5em;
            width:5em;
            border:1px solid black;
            margin:1em;
            cursor:pointer;
        }
        .area__item:hover{
            background-color:pink;
        }
    </style>
</body>
</html>

最佳答案

试试这个代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .area{
            display:flex;
            flex-wrap:wrap;
            width:100%;
        }
        .area__item{
            display:flex;
            justify-content:center;
            align-items:center;
            height:5em;
            width:5em;
            border:1px solid black;
            margin:1em;
            cursor:pointer;
        }
        .area__item:hover{
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="area">
    <?php

        $x = 0;
        while($x!=10){
            echo'
                <div id="item_'.$x.'" class="area__item" onclick="selector('.$x.')">
                '.$x.'
                </div>';
            $x++;
        }
    ?>
    </div>
    <script>

        function selector(item) {

            // Get the total Class length

            var classLength = document.getElementsByClassName("area__item");

            // First check any of the classes holds the style attribute, then remove it

            for(var i = 0; i < classLength.length;i++){
                var element = document.getElementById('item_' + i);
                if (element.hasAttribute("style")) {
                   element.style.backgroundColor = "";
                }
            }

            // Get the selected element by argument
            // Then add classes to the selectedElement

            var selectedElement = document.getElementById('item_'+item);
            selectedElement.style.backgroundColor = "pink";

        }
    </script>
</body>
</html>

关于java - 在 js/php 范围内，什么是更好的选择/目标概念，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58264015/

24

4

0

文章推荐： java - spring是如何管理session的？

jQuery - "each"范围内？
我有三个 td，并且正在尝试将每个内部的函数限制为仅该 td。我该怎么做呢？使用此代码，它会获取所有 3 个图像并将它们全部插入到 h2 之前: jQuery("td.frontpage_news")
excel - 大约在 Excel 范围内？
这是所需的通用公式:if((b2-b1)=c1,True,False但是，我需要 b2-b1约等于 c1 , 在 5 内大约单位(在本例中为秒)。有没有可以处理这个的函数？最佳答案你也可以试试这个
java - 验证变量在 Java 范围内
我有三个整数，作为命令行参数传入后赋值给变量。我想验证每个整数都在 1-5 范围内。有没有一种方法可以在不使用如下所示的 if 语句的情况下在 Java 中完成此操作？我想避免这样做(注意伪代码):
Javascript:检查一个数字是否在另一个数字的 n 范围内
检查某个变量 X 是否在某个变量 Z 的 n 个数字之内的最简洁方法是什么。n 是任意定义的数字(即 3)。所以我想要 if (z {something} x){ // run code i
Gradle 全局变量不在 buildscript 范围内
我的顶级 build.gradle (Gradle 2.2) 中有类似的东西 ext.repo = "https://my-artifactory-repo" buildscript { re
java - 如何在jsp中将请求对象存储在 session 范围内
我只是在我的 jsp 页面中进行随机技巧和测试。我想使用 Attributes 将 request 范围对象存储在 session 范围对象中。存储后，当尝试从请求属性中提取值(存储在 session
java - 如何将属性值保留在 session 范围内？
我正在使用 Spring 。我有一个外部化属性文件。我正在按如下方式加载它。现在我如何将 session 中的属性作为键值对保存？我尝试编写一个扩展 ServletContextListene
mysql - 获取行数在内连接 rails 范围内
我有以下范围: scope :billable, -> (range_start = nil, range_end = nil) { joins(:bids) .where("au
c# - 如何检测对象是否在 'using' 范围内？
请看我的示例代码: var testObject = new SomeClass(); using (testObject) { //At this point how can the te
c++ - 如何保持在 vector 范围内？
我目前在保持在 vector 范围内时遇到一些问题。在下面的代码中，我试图检查正在检查的数字是否小于或等于它后面的数字 #include #include #include bool fun(
javascript - 迷失在 javascript 范围内
有人可以帮我解决下面的(简化的)代码吗？我试图从幻灯片事件函数中调用 doTheSlide() 函数。我对 JS 范围的理解仍然有点可疑。实现这一目标的正确方法是什么？我收到此错误: Uncaugh
ios - 检查时间是否在 Swift 范围内
如何在 Swift 中检查时间是否在下午 6 点到晚上 11 点之间？我在使用 NSDateFormatter 时遇到了困难，我觉得一定有更简单的方法。最佳答案使用NSCalendar: let
c++ - 将世界保持在视口(viewport)范围内
我目前正在尝试创建一个 2D 横向滚动条，并且我目前有我的“世界”绘图(暂时是一个大白框)，但我无法弄清楚世界地图的边缘与边缘之间的任何关系确保视口(viewport)始终完全被 map 覆盖。我的
c++ - 模板声明不能出现在 block 范围内
我正在学习李普曼，而且我只是在学习。我在这里尝试编写一个代码，该代码将返回 vector 中的最小元素。当我在 Codeblocks 中编译我的代码时，它说:“模板声明不能出现在 block 范围内”
javascript - 范围内 JS 日期对象的百分比
我有三个日期对象。我该如何比较它们才能确定它们之间的相对差异。 oldDate = newDate() - 5; midDate = newDate() - 2.5; newDate = newDat
javascript - 检查变量是否在 Javascript 范围内
我需要检查对象“objCR”是否存在于当前范围内。我尝试使用以下代码。 if(objCR == null) alert("object is not defined"); 让我知道哪里错了。最佳答案
java - 检查ipAddress是否在私有(private)范围内
如何检查 IP 地址是否属于私有(private)类别？ if(isPrivateIPAddress(ipAddress)) { //do something } 如有
javascript - 如何查看用户选择是否在 HTML 范围内
我正在开发一个 Firefox 插件，它可以转换用户通过用户选择突出显示的屏幕温度。转换后，用户选择将替换为 ID 为 alreadyconverted 的 span HTML 元素，其中包含原始温度
Python:有效地检查整数是否在 *many* 范围内
我正在开发一个邮资应用程序，该应用程序需要根据多个邮政编码范围检查整数邮政编码，并根据邮政编码匹配的范围返回不同的代码。每个代码都有多个邮政编码范围。例如，如果邮政编码在 1000-2429、254
excel - 在 Excel 范围内 - 忽略空单元格
我正在使用 excel 范围进行连接:Set rng = Range("A1:A8")如果范围内的单元格之一为空，则会添加一个空格。你如何阻止这个空间被添加？最佳答案假设您在那些非空单元格中有常

首页

博学

6Ren·AI

商城

java - 在 js/php 范围内，什么是更好的选择/目标概念