Question

我正在使用Jquery根据页面上的用户交互来显示div块的隐藏部分。

不能选择使用其他framework，页面交互就像是单页behavior。

目前，我的JS代码中包含所有这些代码，我正在寻找可能的代码optimization或任何其他方法来处理这种类型的scenario。预先感谢

我已使用toggleClass中的Jquery。：Jquery个功能可见。

   // New section
    $(document).on('click', '.sone_button_1', function () {
        $('.div_5').removeClass('hidden');
        $('.div_6').removeClass('hidden');
        $('.div_2').addClass('hidden');
        $('.div_1').addClass('hidden');
        $('.div_4').addClass('hidden');
    });
    // new section
    $(document).on('click', '.some_list_2', function () {
        $('.div_3').removeClass('hidden');
        $('.div_2').removeClass('hidden');
        $('.div_5').addClass('hidden');
    });

    // new section
    $(document).on('click', '.some_button_2', function () {
        $('.div_1').removeClass('hidden');
        $('.div_3').addClass('hidden');
        $('.div_4').addClass('hidden');
        $('.div_5').addClass('hidden');
    });
  ...

它可以按预期运行，但是还需要更多使其有效和可能的交互。

Answer 1

您仅可以在JQuery中使用.hide()和.show()，并为属于div的类提供一个类。

它看起来很简单，您不必使用 CSS 代码。

/* 
 * All interaction happen in same PAGE, 
 */
// New section
$(document).on('click', '.some_button_1', function() {
  $('.hide-first').hide();
  $('.hide-second').show();
});

// new section
$(document).on('click', '.some_button_2', function() {
  $('.hide-first').show();
  $('.hide-second').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hide-first">Div-1.1</div>
<div class="hide-first">Div-1.2</div>
<div class="hide-first">Div-1.3</div>

<div class="hide-second">Div-2.1</div>
<div class="hide-second">Div-2.2</div>
<div class="hide-second">Div-2.3</div>

<button class="some_button_1">Hide First Show Second</button>

<button class="some_button_2">Show First Hide Second</button>

Answer 2

可能仅仅是组织单击每个按钮/列表时发生的事情？这样可以避免编写重复的代码并使之更加灵活：

@Throws(java.lang.IllegalArgumentException::class)
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    val layout = inflater.inflate(R.layout.configuration_fragment, container, false)
    var connectionNumber: Int? =
        activity!!.intent.getIntExtra(resources.getString(R.string.extra_connection_number), -1)
    if (connectionNumber == -1) {
        throw IllegalArgumentException()
    }
(...)

let interact_mapping = {
    '.some_button_1': [
        ['.div_5', true],
        ['.div_6', true],
        ['.div_2', false],
        ['.div_1', false],
        ['.div_4', false],
    ],
    '.some_list_2': [
        ['.div_3', true],
        ['.div_2', true],
        ['.div_5', false],
    ],
    '.some_button_2': [
        ['.div_1', true],
        ['.div_3', false],
        ['.div_4', false],
        ['.div_5', false],
    ],
};

const $document = $(document);

Object.keys(interact_mapping).forEach(function(interact_selector) {
    let interact_targets = interact_mapping[interact_selector];
		
    $document.on('click', interact_selector, function() {
        for (let target_index = 0; target_index < interact_targets.length; target_index++) {
            let target = interact_targets[target_index];
            
            if (target[1]) {
                $(target[0]).removeClass('hidden');
            } else {
                $(target[0]).addClass('hidden')
            }
        }
    });
});

.hidden {
    visibility: hidden;
}

jQuery的好解决方案show hide Div section

2 个答案: