jQuery和主题选项

时间:2012-10-04 18:45:05

标签: jquery

实际上,我的元文本文本字段上有两个复选框,文本字段上方还有两个元文本文本字段。我的主题选项中还有两个文本字段,我必须在其中放置一些html和javascript代码。所以这是我的代码:

Metabox文本字段和复选框:

<input type="textarea" id="c" value="Your Name" />
<input type="textarea" id="d" value="My Name" />
<input type="checkbox" id="a" />
<input type="checkbox" id="b" />
<input type="textarea" id="e" />

主题选项文本字段:

<input type="textarea" id="f"  />
<input type="textarea" id="g"  />

我必须将javascript放在主题选项文本字段中,如下所示:

<div>
<script type=text/javascript> name: 'My Name is/', name2: 'Your name is/', </script> 
</div>

现在真正担心。我希望当我单击带有“a”的复选框时,带有id“f”的主题选项文本字段中的代码将被放入元数据为“e”的元文本文本字段中,但几乎没有修改。我需要的修改是来自带有id“c”和“d”的元文本文本字段的数据将首先被添加到已经从主题选项文本字段中获取的代码中,其id为“f”,其方式为:具有id“c”的元文本文本字段的值被添加到“名称:我的名称是/(这里将是具有id”c“的文本字段的值)”和具有id“d”的元文本文本字段的值'被添加到“name2:你的名字是/(这里将是id为'd'的文本字段的值)”。

我也在使用jquery代码来处理这些复选框行为。这是我的jQuery代码。

$(function () {
$('#a, #b').change(function () {
    var $a = $('#a'), $b = $('#b'), $c = $('#c');
    if (this.id == 'a' && this.checked) {
       $c.val('Hello World!');
       $b.prop('checked', false);
    } else if (this.id == 'b' && this.checked) {
       $c.val('Not hello World!'); 
       $a.prop('checked', false);
    } else {
       $c.val('');
    }
});
});

显然这个jQuery代码存在缺陷,因为我不想要这些值,例如我的metabox文本字段的Hello world或Not Hello World,其id为'c'。我想要那个领域的价值,正如我之前解释的那样。请帮助我这方面。我非常沮丧。

1 个答案:

答案 0 :(得分:1)

首先,使用jQuery代替$。在WordPress环境中,jQuery以“noconflict”模式运行,因此$变量不可用。

其次,我会稍微重写一下你的事件处理程序:

jQuery('#a, #b').change(function () {
    var $this = jQuery(this), // Get a handle on the checkbox we just clicked.
        $c = jQuery('#c'),    // Get a handle on the textbox.
        $d = jQuery('#d'),    // Get a handle on the textbox.
        $e = jQuery('#e'),    // Get a handle on the textbox.
        $f = jQuery('#f'),    // Get a handle on one of our default values.
        $g = jQuery('#g');    // Get a handle on one of our default values.

    if ($this.attr('id') == 'a' && $this.is(':checked')) {
       // Clicking checkbox a will add the content of c and f and place it in e
       // It will also uncheck checkbox b.

       $e.val( $c.val() + ' ' + $f.val() );
       $b.removeAttr('checked');
    } else if ($this.attr('id') == 'b' && $this.is(':checked')) {
       // Clicking checkbox b will add the content of d and g and place it in e
       // It will also uncheck checkbox a.

       $e.val( $d.val() + ' ' + $g.val() );
       $a.removeAttr('checked');
    } else {
       $e.val('');
    }
});

这似乎可以处理您描述的场景。如果没有,请编辑您的问题,逐步解释每个复选框更改后应该发生什么,以便我们可以相应地编写脚本。