Javascript根据页面上另一个对象的标识更改href值



我有一个页面,上面有一个呼叫我们按钮,比如:

<a class="various classes" href="tel:555-555-5555" title="call us">Call Us</a>

在页面的其他地方,我有一个产品功能列表,比如

<div class="divclass">
<table>
<tbody>
<tr>
<td class="t-label">Location</td>
<td class="t-value">CA</td>
</tr>                                                               
<tr>
<td class="t-label">Mileage</td>
<td class="t-value">170444</td>
</tr>                                                                    
</tbody>
</table>
</div>

我的目标是根据其中一个产品功能的内容切换a href中使用的电话号码。例如,如果位置是CA或WA,它将是一个电话号码;如果位置是OH或NY,则它将是另一个。

为了实现这一点,我认为我可以使用以下内容来确定目标并更改href:

var a = document.getElementById('myElementID');
a.href = "tel:777-777-7777";

但是游戏中没有一个对象有ID,所以我不能使用getElementById来针对我想要更改的a或Location值。

即使假设我确实有ID可以使用,我也不确定以Location Value的内容为条件进行更改的最佳方式。

问题:

  1. 针对上述无ID DOM对象的最佳方法是什么?

  2. 如何使href更改取决于Location值的内容?If/Else语句?

let target = document.querySelector('a[href="tel:555-555-5555"]'); // first one
let labels = Array.from(document.querySelectorAll('td.t-label'));
let locationLabel = labels.find((td) => textContent === Location);
let location = locationLabel.nextElementSibling.textContent;
let numbers = {
CA: 111-111-1111,
NY: 222-222-2222,
};
target.href = 'tel:' + numbers[location];

我没有足够的信息来了解您正在使用什么类型的后端,或者您是否正在动态创建行,但我提供了一个在遇到相同问题时如何解决问题的大致想法。

<tbody> 
<?php foreach($obj as $key=>$val){ ?>
<tr>
<!-- generate row in loop -->    
<td><?php echo "data1" ; ?> </td>
<td><?php echo "data2" ;  ?> </td>
<?php $objid = $obj[$key]['objid'];
$objkey = $tableInfo[$key]['objkey'];
?>  
<td><button id="demonstration" onclick="doSomething(event,'<?=$objid; ?>','<?=$objkey; ?>')">Example</button></td>
</tr>
<?php  }?>
<!-- loop end for table -->
</tbody>

<script>
function doSomething(e, a, b){
e = e || window.event;
e.preventDefault();

let aa = a;
let bb = parseInt(b);
let baseurl =  '<?= $this->baseUrl; ?>';
let url = baseurl+'/home/edit/id'+"/id/"+aa+"/bb/"+bb;

window.open(url, '_self');
}

$(document).ready(function() {
//this is just a general idea 
});
</script>

注意-目前我的个人资料还不够好,因此我无法对您的问题发表评论以获取更多信息,我真的很想帮助您,并给您一个大致的想法,以便您能够解决您的问题。如果我误解了你的问题,请原谅我。

最新更新