Use jQuery to complete some operations, beg the boss of jQuery

the following code, there are two groups of pictures, user1-image and user2-image, each have three pictures. Now each group can only select one picture, which means that after selecting a picture, you have to traverse the other pictures in this group and restore the other selected picture classes. What do you do? (restore with $(this). Attr ("class", "user-img1 or 2");)) Note that imgList is an array of the names of the last two pictures selected, so the dom is updated, and the array is also updated. Finally, choose one for each group of pictures, that is, two pictures

. 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>test</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="panel panel-default">
        <!-- <h3>{question}</h3> -->
        <div class="panel-body">
            <div class="row" style="height:100%;background: -sharpEEE;">
                <div style="float: left;">
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img1" data-name="img1" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img1" data-name="img2" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img1" data-name="img3" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                </div>

                <div style="float: left;">
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img2" data-name="img1" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img2" data-name="img2" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                    <div style="width: 300px;float: left;margin-left: 3px">
                        <img class="user-img2" data-name="img3" src="file:///Users/1/Desktop/timg.jpeg" style="width:100%" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

</html>


<script type="text/javascript">
    $(document).ready(function () {
        $(".questionClass>input[type="text"]").attr("readonly", true);
        // var d1 = $(".user-img1");
        // console.log(d1);
        
        $(document).delegate(".user-img1", "click", function () {
            $(this).attr("class", "selected");
            console.log($(this));
            var textValue = $(".questionClass>input[type="text"]").val();
            var imgList = textValue.split(",");
            if (textValue == undefined || textValue == "") {
                imgList = new Array();
            }
            imgList.push($(this).data("name"));
            $(".questionClass>input[type="text"]").val(imgList.join(","));

        });
        $(document).delegate(".user-img2", "click", function () {
            $(this).attr("class", "selected");
            var textValue = $(".questionClass>input[type="text"]").val();
            var imgList = textValue.split(",");
            if (textValue == undefined || textValue == "") {
                imgList = new Array();
            }
            imgList.push($(this).data("name"));
            $(".questionClass>input[type="text"]").val(imgList.join(","))

        });

        $(document).delegate(".selected", "click", function () {
            $(this).attr("class", "user-img1");
            var imgList = $(".questionClass>input[type="text"]").val().split(",");
            var index = $.inArray($(this).data("name"), imgList);
            if (index > -1) {
                imgList.splice(index, 1);
            }
            $(".questionClass>input[type="text"]").val(imgList.join(","))
        });
        $(document).delegate(".selected", "click", function () {
            $(this).attr("class", "user-img2");
            var imgList = $(".questionClass>input[type="text"]").val().split(",");
            var index = $.inArray($(this).data("name"), imgList);
            if (index > -1) {
                imgList.splice(index, 1);
            }
            $(".questionClass>input[type="text"]").val(imgList.join(","))
        });

        var anwser = $(".answers").attr("data-pre_answer");
        if (anwser != null && anwser != "" && anwser != undefined) {
            var json = jQuery.parseJSON(anwser);
            if (json["text"] != null) {
                $.each(json["text"].split(","), function (index, element) {
                    $("img[data-name="" + element + ""]").attr("class", "selected");
                });
                $(".questionClass>input[type="text"]").val(json["text"]);

            }
        }


    });
</script>

<style type="text/css">
    .selected {
        border: solid 10px red;
    }
</style>
Front-end javascript
Mar.02,2021 
 var $imgs1 = $('.user-img1')
 var $imgs2 = $('.user-img2')
 $imgs1.click(function() {
    $imgs1.removeClass('selected');
    $(this).addClass('selected')
})
 $imgs2.click(function() {
    $imgs2.removeClass('selected');
    $(this).addClass('selected')
})

A little more questions, a little bit.

  1. < / body > don't put anything after it except < / html > .
    2. The
  2. script tag should be placed before < / body > .
    3. The
  3. style tag is put in the head as much as possible. Although the new standard can be put into body, considering the rendering process, it is recommended to put it in head first.
  4. consider that you are referring to the 3.x version of jQ, .delegate () is an API whose tag is invalid, so don't use it again. Documentation can first refer to jQuery API Chinese documentation .
  5. $(). Ready (function () {}) it is recommended to use $(function () {}) instead.
    6. The
  6. readonly attribute can be operated using .prop () .
  7. do not use new Array () to create a new array, just use the literal quantity, that is, [] .
    8. Why is there a tag signature in the
  8. custom data- attribute? What a waste. JQ can be used to store things, and there is also a corresponding API that can be accessed (in fact, there is also a native one, since there is no divergence here when talking about jQ), you can save which one is selected in the parent class of each group of img, and then add an id to get the DOM handle of the jQ. (in fact, you can use the data- tag directly, but I think it's troublesome. Hey, hey) ~

(it seems that it is not good not to put the code if you talk too much. )

< hr >

HTML: 

function updateText(jQdom) {
    var sel1 = $('-sharpgroup1').data('selected'),
        sel2 = $('-sharpgroup2').data('selected');
    jQdom.val(sel1 + ', ' + sel2);
}
$(function(){
    var $selText = $('.questionClass').children('input[type="text"]');
        $selText.prop('readonly', true);
    $(body)
        .on('click', '.user-img1', function () {
            $('.user-img1').removeClass('selected');
            $(this).addClass('selected');
            var name = $(this).data('name');
            $('-sharpgroup1').data('selected', name);
            updateText($selText);
        })
        .on('click', '.user-img1', function () {
            $('.user-img2').removeClass('selected');
            $(this).addClass('selected');
            var name = $(this).data('name');
            $('-sharpgroup2').data('selected', name);
            updateText($selText);
        })
    //anwser
})

Previous: Why does DCL double check lock need two layers of judgment?

Next: What libraries are available for react native network requests?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b35a97-2bf94.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b35a97-2bf94.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?