Question

我需要让文本输入显示被点击元素的类名。请参阅以下代码：

UPDATED DEMO with working solution by @arun-p-johny（谢谢！）

HMTL：

<ol>
  <li>
      <input type="text" name="status{{photo.id}}" class="markinput" id="status{{photo.id}}" value="neutral" />
    <a href="#" class="mark neutral" title="Toggle yes, no or neutral."><b>Yes</b><i>No</i>Neutral</a>
  </li>
</ol>

jQuery的：

// Toggle between selected, rejected and neutral settings
var classNames = ['yes', 'no', 'neutral'];

$( '.mark' ).click(function () {
    var $this = $(this);
    $this.toggleClass(function (i, className, b) {
        var ret_index;
        $.each(classNames, function (index, value) {
            if ($this.hasClass(value)) {
                ret_index = (index + 1) % classNames.length;
            }
        });
        $this.removeClass(classNames.join(' '));
        return classNames[ret_index];
        // Need to toggle value of input based on adjacent element class
        // $this.closest("input").val(?????????);
    });
});

Answer 1

尝试

<ol>
    <li>
        <input type="text" name="status{{photo.id}}" class="markinput" id="status{{photo.id}}" value="neutral" /> 
        <a href="#" class="mark neutral" title="Toggle yes, no or neutral."><b data-class="yes">Yes</b><i data-class="no">No</i><span data-class="neutral">Neutral</span></a>
    </li>
</ol>

然后

var classNames = ['yes', 'no', 'neutral'];

$('.mark').click(function (e) {
    var $this = $(this);
    var clazz = $(e.target).data('class');
    $this.removeClass(classNames.join(' ')).addClass(clazz);
    $this.prev("input").val(clazz)
});

演示：Fiddle

如何使用jQuery基于相邻元素类切换输入值？

1 个答案: