如何保持数据函数和变量DRY？ [英] How to keep data functions and variables DRY?

问题描述

如何让这个Jquery变干？

How do I make this Jquery dry?

// Adding data to input depending on what div is clicked 

    $('#navninfoDiv').click(function() {
        $('input#webhost_navninfo').data('myData', null);
    });
    $('#navninfoDivP').click(function() {
        $('input#webhost_navninfo').data('myData', 'p');
    });
        $('navninfoDivV').click(function() {
        $('#inputwebhost_navninfo').data('myData', 'V');
    });

// Adding data to input depending on what div is clicked 

    $('#prisinfoDiv').click(function() {
        $('#inputwebhost_prisinfo').data('myData2', null);
    });
    $('#prisinfoDivP').click(function() {
        $('#inputwebhost_prisinfo').data('myData2', 'p');
    });
        $('#prisinfoDivV').click(function() {
        $('#inputwebhost_prisinfo').data('myData2', 'V');
    });

// Adding data to input depending on what div is clicked 


    $('#cableinfoDiv').click(function() {
        $('#inputwebhost_cableinfo').data('myData3', null);
    });
    $('#cableinfoDivP').click(function() {
        $('#inputwebhost_cableinfo').data('myData3', 'p');
    });
        $('#prisinfoDivV').click(function() {
        $('#inputwebhost_cableinfo').data('myData3', 'V');
    });

// Adding data to input on submit 
    $('#smt').click(function() {

// for input#webhost_navninfo

        var myData = $('#webhost_navninfo').data('myData'),
            val = $('#webhost_navninfo').val();
        if (myData) {
            $('#webhost_navninfo').val(myData + val);
        }

// for input#webhost_prisinfo

        var myData2 = $('#webhost_prisinfo').data('myData2'),
            val2 = $('#webhost_prisinfo').val();
        if (myData2) {
            $('#webhost_prisinfo').val(myData2 + val2);
        }

// for input#webhost_cableinfo

        var myData3 = $('#webhost_cableinfo').data('myData3'),
            val3 = $('#webhost_cableinfo').val();
        if (myData3) {
            $('#webhost_navninfo').val(myData3 + val3);
        }
    });

如何干掉所有这些代码？我有更多关于50的输入字段。

How do I dry all this code up? I have many more input fields about 50.

这是我的HTML和jQuery没有数据函数： http://jsfiddle.net/z5qeX/2/

Here is my HTML and jQuery without the data functions: http://jsfiddle.net/z5qeX/2/

我在这个例子中给出的代码示例仅仅是来说明我想要的功能。它与jsfiddle中的HTML不匹配，但它是我想要将其添加到以后的代码。

The code example I gave in this example is just to illustrate the functionality I want. It does not match the HTML in the jsfiddle, but it is the code I want to add it to later.

推荐答案

这是我的简单解决方案，脚本非常少，只需在下面提到的所有3种类型的div中添加几个数据属性。而不是使用 mydata ， mydata2 和 mydata3 我们可以只需使用 mydata 作为所有类型输入的数据属性名称。

Here is my simple solution with very less script provided you add couple of data attributes into all 3 types of div's as mentioned below. Also instead of using mydata, mydata2 and mydata3 we can just use mydata as data attribute name for all types of input.

这是工作 演示

Here is the working demo

加价

<div id="navninfoDiv" data-type="navninfo" data-info="">navninfo</div>
<div id="navninfoDivP" data-type="navninfo" data-info="p">navninfop</div>
<div id="navninfoDivV" data-type="navninfo" data-info="V">navninfoV</div>

<div id="prisinfoDiv" data-type="prisinfo" data-info="">prisinfo</div>
<div id="prisinfoDivP" data-type="prisinfo" data-info="p">prisinfop</div>
<div id="prisinfoDivV" data-type="prisinfo" data-info="V">prisinfoV</div>

<div id="cableinfoDiv" data-type="cableinfo" data-info="">cableinfo</div>
<div id="cableinfoDivP" data-type="cableinfo" data-info="p">cableinfop</div>
<div id="cableinfoDivV" data-type="cableinfo" data-info="V">cableinfoV</div>

<input type="text" id="webhost_navninfo" />
<input type="text" id="webhost_prisinfo" />
<input type="text" id="webhost_cableinfo" />

<input type="button" id="smt" value="Submit" />

Js

$(function(){
    //Adding data to input
    //This will attach click event handler to all the divs 
    //whose id contains 'infoDiv'
    $('div[id*=infoDiv]').click(function() {
        $('#webhost_'+$(this).data('type')).data('myData', $(this).data('info'));
    });

    // Setting value to input on submit 
    $('#smt').click(function() {
        var $this;
        //This will loop through all the input fields whose id starts '
        //with 'webhost and prepend data('myData') to its value
        $("input[id^=webhost]").each(function(){
            $this = $(this);
            $this.val(($this.data("myData") || '') + $this.val());
        });
    });
});

我希望这可以帮到你。

这篇关于如何保持数据函数和变量DRY？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！