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

发布于
2018-04-10

如下代码，有两组图片，user1-image和user2-image，每组图片三张，现在每组只能选定一张图片，意味着选好了一张图片后，要遍历这组的其他图片并把其他有选中的图片类还原，怎么做？（还原用$(this).attr("class", "user-img1或者2");）注意imgList是最后选定的两张图片的名字的数组，所以dom更新，数组也要更新，最后是每组图选一个，也就是两张图

<!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>

javascript 前端

阅读 2k

2 个回答

得票最新

某熊猫桑

16.1k61547

发布于
2018-04-10

✓ 已被采纳

问题略多，一点点说。

</body>后边除了</html>，其它什么都不要放。
script标签请放到</body>之前。
style标签尽量放到head里。虽然新标准是可以放到body里的，但考虑渲染流程，还是推荐先放到head里吧。
考虑到你引用的是3.x版本的jQ，.delegate()已经是标记作废的API就别再用了。文档可以先参考jQuery API 中文文档。
$().ready(function(){})推荐用$(function(){})代替。
readonly属性可以使用.prop()操作。
新建数组不要用new Array()，直接用字面量即[]就好。
自定义data-属性里咋就放了个标签名？好浪费……jQ里可以用它存东西的，而且也有相应的API可以调取（其实原生里也有，既然讲jQ这里就不发散了），你可以在每组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没看懂就不写了……
})

yuanxiaowa

10.1k3938

发布于
2018-04-10

 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')
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

Next.js做纯前端是否可行？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

请问开发React Native，一般是推荐哪个主流的UI库呢？

如何实现一个深拷贝函数？