Javascript 如何为span实现jQuery val（）？

我有几个按跨度分组的select元素。我正在创建一个插件来与元素进行一些交互。现在，我想为我的用户提供

val（）

函数的支持，以便他们能够获取或设置我的span的“值”。设置该值将导致select box元素更改。获取该值将导致添加selectbox值

基本上，我希望我的插件添加对

val（）

方法的支持。关于如何实现这一点有什么想法吗

代码

<span id="test">
    <select id="one">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select id="two">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</span>

1.
2.
1.
2.

Challange

---

让以下代码正常工作：

$（'#test'）.val（'1:1'）

和

$（'#test'）.val（）

这不是一个完整的插件，我没有覆盖

val（）

，但它应该能满足您的需要

$.fn.value = function(value) {
    if (value) {
        var s = value.split(':');
        for ( var i = 0; i < s.length; i++ ) {
            this.find('select').eq(i).val(s[i]);
        }
    } else {
        var result = [];
        this.find('select').each( function( index, item ) {
            result.push($(item).val());
        });

        return result.join(':');

    }
}

$(function() {
    $("#test").value("2:2");
    alert($("#test").value());
});

$.fn.value=函数（值）{
如果（值）{
var s=value.split（“：”）；
对于（变量i=0；i

---

您可以在

尝试重写

.val（）

，这不是一个好的iead，但是如果您确实想要span的类似

.val（）

的方法，您可以添加以下代码：

$.fn.sval = function(value) {
   if(!value)
       return $(this).html();
   else
       return $(this).html(value);
}

然后，使用它，就像.val（）一样：

看看jquery插件。他们所做的是将原始jquery

val（）

函数存储在一个变量中，并用自己的函数替换它。然后您将首先收到调用，您可以检查元素是否为

span

，如果是，则返回，否则调用原始函数

var originalVal = $.fn.val;

$.fn.val = function(params){
   // if span then return your logic
   // otherwise call originalVal 
}

---

我认为这样处理jQuery不是一个好主意，可能会有一些键入错误，但现在您可以：

var oldVal = jQuery.fn.val;
jQuery.fn.extend({
    val: function(value) { 
        // replace class check below with something related to your span
        if (this.length == 1 && this.is('span.my-custom-class')) { 
            if (arguments.length == 0) {
                // below is just a sample, traverse 
                // child selects like in DanielB's answer
                // and return the value you expect
                return this.attr('justsomesample');                 
            }
            else {
               this.attr('justsomesample', value); 
               return this;
            }
        }; 
        return oldVal.apply(this, arguments); }});
});

---

您可以使用.text（）JQuery函数而不是.val（）JQuery函数来更改跨度。

我不确定重写

val（）

是否是一个好主意（因为您将不得不修改原始

.val（）

函数的功能），但对于一个有趣的问题，+1好的，主要问题是如何重写val（）而不是如何执行你的具体任务？@DanielB:没错。我想在我的插件中覆盖、支持或以其他方式实现

val（）

。。。我来看看密码。我希望能够仅为某些元素重定向

val

。哈哈哈。。。也许写一个value属性会更简单；-）。这似乎是最危险、最真实的答案：-）。谢谢。是的，这是有风险的，但我认为做一个jquery插件，你必须修改jquery本身。很抱歉，我没有提供代码示例，但我想它为您指明了正确的方向。这只是模仿了

.html（）

方法。（不是OP要求的）+1，最完整的方法。。但是为了适应OP，您可以存储原始的

val

引用，然后检查

this.is（':input'）

并使用原始的

val

，否则您的代码。这与OP想要什么无关。

var oldVal = jQuery.fn.val;
jQuery.fn.extend({
    val: function(value) { 
        // replace class check below with something related to your span
        if (this.length == 1 && this.is('span.my-custom-class')) { 
            if (arguments.length == 0) {
                // below is just a sample, traverse 
                // child selects like in DanielB's answer
                // and return the value you expect
                return this.attr('justsomesample');                 
            }
            else {
               this.attr('justsomesample', value); 
               return this;
            }
        }; 
        return oldVal.apply(this, arguments); }});
});