鍍金池/ 問答/HTML/ 用jQuery完成一些操作，求jQuery大佬

用jQuery完成一些操作，求jQuery大佬

如下代碼，有兩組圖片，user1-image和user2-image，每組圖片三張，現(xiàn)在每組只能選定一張圖片，意味著選好了一張圖片后，要遍歷這組的其他圖片并把其他有選中的圖片類還原，怎么做？（還原用$(this).attr("class", "user-img1或者2");）注意imgList是最后選定的兩張圖片的名字的數(shù)組，所以dom更新，數(shù)組也要更新，最后是每組圖選一個，也就是兩張圖

<!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: #EEE;">
                <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>
回答
編輯回答
使勁操

問題略多，一點點說。

  1. </body>后邊除了</html>，其它什么都不要放。
  2. script標簽請放到</body>之前。
  3. style標簽盡量放到head里。雖然新標準是可以放到body里的，但考慮渲染流程，還是推薦先放到head里吧。
  4. 考慮到你引用的是3.x版本的jQ，.delegate()已經(jīng)是標記作廢的API就別再用了。文檔可以先參考jQuery API 中文文檔。
  5. $().ready(function(){})推薦用$(function(){})代替。
  6. readonly屬性可以使用.prop()操作。
  7. 新建數(shù)組不要用new Array()，直接用字面量即[]就好。
  8. 自定義data-屬性里咋就放了個標簽名？好浪費……jQ里可以用它存東西的，而且也有相應的API可以調(diào)?。ㄆ鋵嵲镆灿校热恢vjQ這里就不發(fā)散了），你可以在每組img的父類里存上選的是哪個，然后加個id以便拿到jQ的DOM句柄（其實直接用data-標簽也行但我嫌麻煩。。嘿嘿）~

（說太多好像不放代碼不好……）

HTML：

<div class="panel panel-default">
    <div class="panel-body">
        <div class="row" style="height:100%;background: #EEE;">
            <div id='group1' data-selected='' style="float: left;">
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img1" data-name="img1" src="timg.jpeg" style="width:100%">
                </div>
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img1" data-name="img2" src="timg.jpeg" style="width:100%">
                </div>
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img1" data-name="img3" src="timg.jpeg" style="width:100%">
                </div>
            </div>

            <div id='group2' data-selected='' style="float: left;">
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img2" data-name="img1" src="timg.jpeg" style="width:100%">
                </div>
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img2" data-name="img2" src="timg.jpeg" style="width:100%">
                </div>
                <div style="width: 300px;float: left;margin-left: 3px">
                    <img class="user-img2" data-name="img3" src="timg.jpeg" style="width:100%">
                </div>
             </div>

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

JS:

function updateText(jQdom) {
    var sel1 = $('#group1').data('selected'),
        sel2 = $('#group2').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');
            $('#group1').data('selected', name);
            updateText($selText);
        })
        .on('click', '.user-img1', function () {
            $('.user-img2').removeClass('selected');
            $(this).addClass('selected');
            var name = $(this).data('name');
            $('#group2').data('selected', name);
            updateText($selText);
        })
    //后邊那段anwser沒看懂就不寫了……
})
2018年4月27日 03:47
編輯回答
吢丕
 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')
})
2018年9月4日 00:59