Question

目前我正在使用jQuery来执行click函数，它会检查被点击的元素是否具有等于三个不同值的属性。

是否有更简洁的写作方式？

$('body').on('click','svg a', function(e){
    if ($(this).attr('xlink:href') =='#congo' || $(this).attr('xlink:href') =='#onshore' || $(this).attr('xlink:href') =='#sea'){
        e.preventDefault();
    }
});

Answer 1

也许$ .inArray解决方案？

$.inArray($(this).attr('xlink:href'), ['#congo', '#onshore', '#sea']) != -1

Answer 2

['#congo','#onshore','#sea'].indexOf($(this).attr('xlink:href')) > -1

Answer 3

使用正则表达式（纯JS）

$(document.body).on('click','svg a', function(e){
    var a = $(this).attr('xlink:href'),
        match = a.match(/#congo|#onshore|#sea/);
    if( match && match[0] == a )
        e.preventDefault();
});

Answer 4

修改，更新

尝试

V2

if (/^(#congo|#onshore|#sea)$/.test($(this).attr("xlink:href"))) {    
    e.preventDefault();
   }

示例

＆＃13;

$('body').on('click','svg a', function(e){
    
    if (/^(#congo|#onshore|#sea)$/.test($(this).attr("xlink:href"))) {    
    e.preventDefault();
    $("#other").hide();
    console.log($(this).attr("xlink:href"));
    } else {
      $("#other").show()
    } 
});

＆＃13;

#other {
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#congo"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">#congo</text>
  </a>
</svg>
<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#onshore"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">#onshore</text>
  </a>
</svg>
<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#sea"
     target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">#sea</text>
  </a>
</svg>
<svg width="140" height="30"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#other">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" 
          y="21" x="60">#other</text>
  </a>
</svg>
<div id="other">other</div>

＆＃13;

＆＃13; jsfiddle http://jsfiddle.net/guest271314/qeux09gr/

如何检查多个平等的陈述？

4 个答案: