Question

我是CSS和JQuery的新手。我使用Html，CSS和JQuery开发了一些页面。

我已经使用了一些div的标签来执行某些操作，我根据我不同的div标签完成了这样的jquery代码..

Jquery代码

$(document).ready(function () {

    $('.Mydata').click(function () {
        $('#submenu').show();
    });

    $('.Mydata').click(function () {
        $('#submenuline').show();
    });

    $('.Personaldata').click(function () {
        $('.Personaltable').show();
    });

    $('.Personaldata').click(function () {
        $('.FourthPage_mainClass').show();
    });

    $('#address').click(function () {
        $('#MyDataLink').show();
    });

    $('#address').click(function () {
        $('#Fourth_Page_Address_Information').show();
    });

    $('#address').click(function () {
        $('#Fourth_Page_Note_Information').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline1').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline2').show();
    });
    $('#address').click(function () {
        $('#fourth_page_table1_leftline3').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline4').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline5').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline6').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_leftline7').show();
    });
    $('#address').click(function () {
        $('#fourth_page_table1_leftline8').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_downline1').show();
    });

    $('#address').click(function () {
        $('#fourth_page_table1_downline2').show();
    });


    $('#address').click(function () {
        $('#fourth_page_table1_downline3').show();
    });
    $('#address').click(function () {
        $('#Fourth_Page_Message').show();
    });

    $('#address').click(function () {
        $('#Fourth_Page_Message1').show();
    });

    $('#address').click(function () {
        $('#Fourth_Page_Message2').show();
    });


    $('#address').click(function () {
        $('#fourth_page_address_table').show();
    });

    $('#address').click(function () {
        $('#fourth_page_last_button').show();
    });
});

HTML代码

    <div id="submenu">
         <a href="#" style="text-decoration:none" id="submenubackgroundcolor"class="Personaldata"> Personal Data</a>  | 
     </div>
     <div id="submenuline">
        -----------------------------------------
      </div>

   <table border="2" id="thirdpageleftsidetable" name="lefttable" bgcolor="#408080"  class="Personaltable">
      <tr>  
            <td>
                 &nbsp;&nbsp;&nbsp;&nbsp;Personal Identity  <br />  
    </div>

     <div id="MyDataLink">
                   <a href="secondpage.html" style="text-decoration:none" >My Data</a>
               ->  <a href="thirdpage.html" style="text-decoration:none">Personal                Data</a>-> Address
      </div>

      <div id="Fourth_Page_Address_Information">
           Address Information
      </div>

      <div id="Fourth_Page_Note_Information">
         <b>Note:</b>&nbsp;Non-India Employee Please <a href="#">Click Here</a>
      /div> 

     <div id="fourth_page_table1">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbs                                                                                                                                                                                                                                                            
    </div>
    <div id="fourth_page_table1_leftline1">
         |
    </div>

和我一样，我已经使用了8行，所以我使用了8个div，比如fourth_page-table1-leftline2,3,4,5,6,7,8。

  <div id="fourth_page_table1_downline1">
---------
</div>

喜欢这3个下线，下线2，下线3。根据另一个我已经采取的一些div。

我已经为上面的jquery函数采用了CSS和许多div标记。一切都很好，但我想做的是因为我有很多div，所以我采用了很多jquery函数，有没有办法减少上面的代码。

我在想的是我要追求更长的过程。这种问题有解决办法吗？

Answer 1

您可以向元素添加类以轻松定位它们，以及指定要打开的元素的数据属性。例如，您的Mydata元素会打开#submenu和#submenuline：

<div class="Opener Mydata" data-open="#submenu,#submenuline">

然后，您可以使用相同的处理程序绑定所有元素：

$(document).ready(function () {

  $('.Opener').click(function () {
    $($(this).data('open')).show();
  });

});

Answer 2

您可以使用data- *属性来解决此特定问题，而不是使用ID和类。

<div data-target="#your-target-id">...</div>
<div data-target="#your-target-id2">...</div>
<div data-target="#your-target-id3">...</div>
<div data-target="#your-target-id4">...</div>

jQuery代码可以简化为以下

$('[data-target]').on('click', function() {
   var targetId = $(this).data('target');
   $(targetId).show();
});

Answer 3

创建一个目标元素数组并循环遍历它。

var d = ["#MyDataLink", "#Fourth_Page_Address_Information"];
$.each(d, function(idx, item) {
    $("#address").click(function() {
      $(item).show();
    });
});

这将减少#address的代码。你也可以为其他元素做同样的事情。

Answer 4

您可以首先合并相同事件的处理程序：

    $(document).ready(function(){

        $('.Mydata').click(function(){
          $('#submenu').show();
         $('#submenuline').show();
        });

      $('.Personaldata').click(function(){
        $('.Personaltable').show();
       $('.FourthPage_mainClass').show();
      });

     $('#address').click(function(){
       $('#MyDataLink').show();
       $('#Fourth_Page_Address_Information').show();
       $('#Fourth_Page_Note_Information').show();
        $('#fourth_page_table1').show();
      $('#fourth_page_table1_leftline1').show();
      $('#fourth_page_table1_leftline2').show();
      $('#fourth_page_table1_leftline3').show();
      $('#fourth_page_table1_leftline4').show();
      $('#fourth_page_table1_leftline5').show();
      $('#fourth_page_table1_leftline6').show();
      $('#fourth_page_table1_leftline7').show();
      $('#fourth_page_table1_leftline8').show();
        $('#fourth_page_table1_downline1').show();
       $('#fourth_page_table1_downline2').show();
        $('#fourth_page_table1_downline3').show();
       $('#Fourth_Page_Message').show();
       $('#Fourth_Page_Message1').show();
       $('#Fourth_Page_Message2').show();
       $('#fourth_page_address_table').show();
      $('#fourth_page_last_button').show();
     });
   });

然后，您可以通过将它们包装在容器元素（例如）中，或者通过为它们提供公共类来对一起操作的元素进行分组，并使用对容器或类的引用来显示和隐藏元素

Answer 5

这是一个简单的重构：

$(document).ready(function () {

    $('.Mydata').click(function () {
        $('#submenuline').show();
        $('#submenu').show();
    });

    $('.Personaldata').click(function () {
        $('.Personaltable').show();
        $('.FourthPage_mainClass').show();
    });

    var things = [
        '#MyDataLink',
        '#Fourth_Page_Address_Information',
        '#Fourth_Page_Note_Information',
        '#fourth_page_table1',
        '#fourth_page_table1_leftline1',
        '#fourth_page_table1_leftline2',
        '#fourth_page_table1_leftline3',
        '#fourth_page_table1_leftline4',
        '#fourth_page_table1_leftline5',
        '#fourth_page_table1_leftline6',
        '#fourth_page_table1_leftline7',
        '#fourth_page_table1_leftline8',
        '#fourth_page_table1_downline1',
        '#fourth_page_table1_downline2',
        '#fourth_page_table1_downline3',
        '#Fourth_Page_Message',
        '#Fourth_Page_Message1',
        '#Fourth_Page_Message2',
        '#fourth_page_address_table',
        '#fourth_page_last_button'
    ]

    $('#address').click(function () {
        for (x in things) {
            $(things[x]).show();
        }
    });

});

需要帮助来改进编写jquery代码

5 个答案: