堆栈内存溢出
  简体   繁体   English

jQuery为我的颜色应用程序提供更好的方法？

[英]jQuery better way for my colors app?

 原文  2014-01-17 10:44:49  6   1    javascript/ jquery/ html

问题描述

i'm a newbies in jQuery and i must confess that i dont like it! 我是jQuery的新手，我必须承认我不喜欢它！

I looking for everywhere for informations and this is what i did with my little skills! 我到处都在寻找信息，这就是我用我的小技巧所做的！

I confess that my code work but rather badly, and i doubt it is optimized. 我承认我的代码可以正常工作，但是效果很差，我怀疑它是否经过优化。 Could you help me to improve & optimize this jQuery code please! 请您能帮我改善和优化此jQuery代码！

As you can see, the code is designed to display various informations in several tag (div, li, h2 ...) when the user select one of these colors. 如您所见，该代码旨在在用户选择其中一种颜色时在多个标签（div，li，h2 ...）中显示各种信息。

Here is my jQuery code: 这是我的jQuery代码： 

$(document).ready(function() {

$("div.color-value.hex p").text("pick a color");
$("div.color-value.rgba p").text("pick a color");
$("div.color-value.hsla p").text("pick a color");

$("ul.color-list li").click(function() {

    //var value;

    switch ( $("ul.color-list.one li").index(this) ) {
        case 0 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#1E2224");
            $("div.color-value.rgba p").text("#rgba");
            $("div.color-value.hsla p").text("#hsla");
            break;
        case 1 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#2");
            $("div.color-value.rgba p").text("#rgba2");
            $("div.color-value.hsla p").text("#hsla2");
            break;
        case 2 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color without alpha");
            $("div.color-value.hex p").text("#3");
            $("div.color-value.rgba p").text("#rgba3");
            $("div.color-value.hsla p").text("#hsla3");
            break;
        case 3 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("simple color");
            $("div.color-value.hex p").text("#4");
            $("div.color-value.rgba p").text("#rgba4");
            $("div.color-value.hsla p").text("#hsla4");
            break;
        case 4 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#5");
            $("div.color-value.rgba p").text("#rgba5");
            $("div.color-value.hsla p").text("#hsla5");
            break;
        case 5 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#6");
            $("div.color-value.rgba p").text("#rgba6");
            $("div.color-value.hsla p").text("#hsla6");
            break;

        case 6 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#7");
            $("div.color-value.rgba p").text("#rgba7");
            $("div.color-value.hsla p").text("#hsla7");
            break;
        }

    // second swatch
    switch ( $("ul.color-list.two li").index(this) ) {
        case 0 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#1E2224");
            $("div.color-value.rgba p").text("#rgba");
            $("div.color-value.hsla p").text("#hsla");
            break;
        case 1 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#2");
            $("div.color-value.rgba p").text("#rgba2");
            $("div.color-value.hsla p").text("#hsla2");
            break;
        case 2 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#3");
            $("div.color-value.rgba p").text("#rgba3");
            $("div.color-value.hsla p").text("#hsla3");
            break;
        case 3 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#4");
            $("div.color-value.rgba p").text("#rgba4");
            $("div.color-value.hsla p").text("#hsla4");
            break;
        case 4 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#5");
            $("div.color-value.rgba p").text("#rgba5");
            $("div.color-value.hsla p").text("#hsla5");
            break;
        case 5 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#6");
            $("div.color-value.rgba p").text("#rgba6");
            $("div.color-value.hsla p").text("#hsla6");
            break;

        case 6 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#7");
            $("div.color-value.rgba p").text("#rgba7");
            $("div.color-value.hsla p").text("#hsla7");
            break;
        }


    // third swatches
    switch ( $("ul.color-list.three li").index(this) ) {
        case 0 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#1E2224");
            $("div.color-value.rgba p").text("#rgba");
            $("div.color-value.hsla p").text("#hsla");
            break;
        case 1 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#2");
            $("div.color-value.rgba p").text("#rgba2");
            $("div.color-value.hsla p").text("#hsla2");
            break;
        case 2 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#3");
            $("div.color-value.rgba p").text("#rgba3");
            $("div.color-value.hsla p").text("#hsla3");
            break;
        case 3 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#4");
            $("div.color-value.rgba p").text("#rgba4");
            $("div.color-value.hsla p").text("#hsla4");
            break;
        case 4 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#5");
            $("div.color-value.rgba p").text("#rgba5");
            $("div.color-value.hsla p").text("#hsla5");
            break;
        case 5 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#6");
            $("div.color-value.rgba p").text("#rgba6");
            $("div.color-value.hsla p").text("#hsla6");
            break;

        case 6 :
            $(this).addClass("ckd");
            $("div.color-type-infos").text("color with alpha");
            $("div.color-value.hex p").text("#7");
            $("div.color-value.rgba p").text("#rgba7");
            $("div.color-value.hsla p").text("#hsla7");
            break;
        }
    });

    $("ul.color-list li").click(function(){
            if($(this).hasClass("ckd")){
                $(this).removeClass("ckd");
            } else {
                $(this).addClass("ckd");
        }
    });


});

1 个解决方案

解决方案1
 1 已采纳  2014-01-17 11:10:58

Most of the times there is no need to use switch statements, you can store the info in data-* attributes and read it using .data() method: 大多数时候，不需要使用switch语句，您可以将信息存储在data-*属性中，并使用.data()方法读取它： 

<li  ... data-info="the info body"></li>

For toggling the classes you can use .toggleClass() method so using the second click handler is not necessary, you could also move it's body to your first handler, I haven't seen the markup but according to your code something like the following should help to minify the script: 要切换类，可以使用.toggleClass()方法，因此不必使用第二个单击处理程序，也可以将其主体移动到第一个处理程序，我没有看到标记，但是根据您的代码，应如下所示帮助缩小脚本： 

$(document).ready(function() {

    var $hex = $("div.color-value.hex p").text("pick a color"),
        $rgba = $("div.color-value.rgba p").text("pick a color"),
        $hsla = $("div.color-value.hsla p").text("pick a color"),
        $info = $("div.color-type-infos");

    $("ul.color-list li").on('click', function() {
        var i = $("ul.color-list.one li").index(this) + 1;
        $("ul.color-list li").not(this).removeClass('ckd');
        var info = $(this).toggleClass("ckd").data('info');

        $info.text(info);
        $hex.text( "#" + (i === 1 ? "1E2224" : i) );
        $rgba.text( "#rgba" + (i !== 1 ? i : "") );
        $hsla.text( "#hsla" + (i !== 1 ? i : "") );
    });

});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 有什么办法可以使我的jquery搜索更好？ - is there any way to make my jquery search better? 在我的jQuery中重复函数，是否有更好的方法呢？ - Repeating functions in my jQuery, is there a better way to do this? 在我的Jquery插件中执行循环的更好方法？ - Better way to do a loop in my Jquery plugin? 试图让我的文本 colors 永远交替闪烁，但不使用无限循环，有没有更好的方法？ - Trying to make it so that my text colors will alternate blinking forever but for not working with infinite loop, is there a better way? 我的jQuery插件和访问全局似乎不合适。 更好的方法？ - my jquery plugin and accessing a global seems inappropriate. Better way? 编写此jquery的更好方法？ - Better way to write this jquery? 编写此代码的更好方法（jQuery） - Better way to write this (jQuery) 编写以下jquery的更好方法 - Better way to write the following jquery jQuery模式-这有效还是有更好的方法？ - jQuery Pattern - is this valid or is there a better way? 更好的方法是使用每个jquery - Better way to use jquery each
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM