Question

我的目标是根据用户点击的选项数量，在h4标签内选择三个或更少的选项。

例如，如果没有选择任何元素或者拥有类'Department1, Department 2,'，则h4标记应显示为active，然后让它回退到default类。

截至目前，我只能将1个项目添加到我的h4标签中。我写这篇文章时遇到了麻烦。

我这里有一个JS Fiddle文件// http://jsfiddle.net/breezy/h5812bsc/

正如您所看到的，当您单击某个部门时，它会向该项添加一个active类，然后将该文本附加到h4标记，但如果我选择另一个选项，则会删除上一个附加项并附加新项之一。

简单来说，我需要在我的h4标记内连接两个或三个带有span标记的部门，如果没有选项使该类处于活动状态，那么它会回退到default类。不知道我怎么能做到这一点。一些方向或提示会有所帮助。感谢

的jQuery

// When user clicks on any option it will replace the text to the last selected item
// dependant on the title attribute of the anchor tag
$('.selected-options a.option-btn').click(function (e) {
    e.preventDefault();

    // make the title attribute a variable for use later
    var text = $(this).attr('title');

    $(this).toggleClass('active');

    if ($('.selected-options a.option-btn').hasClass('active')) {

        $(this).parent().parent().parent().parent().parent().find('.toggle-this h4').empty().append(text);

    }


});

Answer 1

一些小改进，

$('.selected-options a.option-btn')和$(this).parent().parent()可以存储到变量中，因此我们不需要一次又一次地找到它们。
正如您评论的那样，All我们切换了所有其他按钮的状态，因此我们可以添加简单检查以查看当前项是否为All（此处我使用{{ 1}}类，可能在您的真实网络中有所不同），如果我们点击default，则切换所有其他元素状态。
然后我们可以使用.map获取jquery包裹的All，并使用.get将其转换为数组。当您评论您只想显示某些项目时，我们可以使用title检查活动项目是否超出限制，并在必要时进行剪辑。
最后，我们可以使用join轻松使用给定的分隔符将length转换为array。

＆＃13;

string

＆＃13;

// When user clicks on any option it will replace the text to the last selected item
// dependant on the title attribute of the anchor tag

// Create references for frequently used elements, so we don't need to 
// call jquery to get them each time.
var $place = $('.department .toggle-this h4');
var $targets = $('.selected-options a.option-btn');

// Maxlimit to clip further choices.
var maxLimit = 2;
// Text to replace the clipped items.
var clippedText = '...';

$targets.click(function (e) {
    e.preventDefault();
    
    // Create a ref to the jquery wrapped object, so we don't need to 
    // call `$(this)` whenever we need to use it.
    var $this = $(this);
    $this.toggleClass('active');
    // If all is selected, toggle others.
    if ($this.hasClass('default')) {
        $targets.not('.default').toggleClass('active', $this.hasClass('active'));
    }
    
    // Get all active departments to an array.
    var actives = $targets.filter('.active').not('.default').map(function() {
        return $(this).attr('title');
    }).get();
  
    // Clip the array to limit
    if (actives.length > maxLimit) {
        actives = actives.slice(0, maxLimit)
        actives[maxLimit - 1] += clippedText;
    } else if (actives.length === 0) {
       // If nothing is choose, set to default value.
        actives.push('any');
    }
    
    // Set text by join the concatenate the items in array with `, `.
    $place.text(actives.join(','));

});

＆＃13;

a {
    text-decoration:none;
}
.selected-options ul {
    width: 90%;
    padding: 15px 0;
    margin: 0 auto;
}
.selected-options li {
    text-align: center;
    margin: 0 auto;
    padding: 4px 0;
    list-style:none;
}
.selected-options li a {
    border:1px solid #ccc;
    width: 99%;
    text-decoration:none;
    padding:3px 5px;
    border-radius:5px;
}
.selected-options li a.active {
    border:1px solid red;
}

＆＃13;

Answer 2

我相信你只是接近它。

我为您计划的每个span添加了一些unique个ID 实现这一点。我建议您最好使用唯一的ID或类 $(this).parent().parent().parent().parent().parent()。

我添加了一些代码：

Updated DEMO

// When user clicks on any option it will replace the text to the last selected item
// dependant on the title attribute of the anchor tag
$('.selected-options a.option-btn').click(function (e) {
    e.preventDefault();

    // make the title attribute a variable for use later
    var text = $(this).attr('title');

    $(this).toggleClass('active');

    if ($(this).hasClass('active')) {

        $(this).parent().parent().parent().parent().parent().find('.toggle-this h4').append("<span id='"+text.replace(' ','')+"'> "+text+"</span>");

    } else{
        $("#"+text.replace(' ','')).remove();
    }


});

Answer 3

这样的事情：

$('.selected-options a.option-btn').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('active');

    // get the h4 element to use later
    var $h4Element = $(this).closest('.department').find('.toggle-this h4'),
        // create a string for tags (with default text to start)
        tags = 'Any',
        // get a reference to the buttons that are 'active'
        $activeItems = $('.selected-options a.option-btn.active')

        // check to be sure there is a selection
    if ($activeItems.length > 0) {
        //since there are active items, clear the 'tags' string
        tags = '';
        // iterate over the active items and generate the markup
        $activeItems.each(function (index, element) {
            tags += '<span>' + $(element).attr('title') + '</span>, ';
        });
        // remove trailing comma and space (after last tag)
        tags = tags.replace(/,\s*$/, "");
    }

    // insert generated html
    $h4Element.empty().append(tags);

});

See this updated fiddle。这总是只对活动的内容进行更新，以便列表与按钮状态匹配。

如何根据元素类将元素元素属性追加到span

3 个答案: